響應(yīng)式網(wǎng)頁設(shè)計是什么

定義

• 響應(yīng)式網(wǎng)頁設(shè)計就是讓網(wǎng)頁具備應(yīng)用css樣式，這就是響應(yīng)式網(wǎng)頁設(shè)計

解釋：

• 響應(yīng)式網(wǎng)頁設(shè)計的英文：
• 設(shè)計：設(shè)想，計劃。設(shè)計就是把實現(xiàn)想法
• 網(wǎng)頁設(shè)計：按照一定的設(shè)計思路布局網(wǎng)頁內(nèi)容
• 傳統(tǒng)網(wǎng)頁設(shè)計：都是針對pc端而設(shè)計的
• 傳統(tǒng)網(wǎng)頁設(shè)計的弊端：在移動互聯(lián)網(wǎng)時代，在移動互聯(lián)網(wǎng)時代，傳統(tǒng)網(wǎng)頁設(shè)計不適合小屏幕展示。網(wǎng)頁設(shè)計網(wǎng) 頁設(shè)計應(yīng)而生
• 響應(yīng)式網(wǎng)頁設(shè)計是一種設(shè)計網(wǎng)頁的思想、方法
• 響應(yīng)：指讓我們的網(wǎng)頁能自動查順用戶的訪問設(shè)備，并根據(jù)查順結(jié)果應(yīng)用不同的css樣式

實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計的技術(shù)手段

• 第一種：通過css判斷用戶設(shè)備
  1.視口

<meta name="viewport" content="width=device-width, initial-scale=1.0,">

2.設(shè)置媒體查順，使用Media Query 判斷用戶設(shè)備

• 第二種：通過js判斷用戶設(shè)備
  1.視口
  2使用js判斷用戶設(shè)備

知識點

• 1.什么是響應(yīng)式網(wǎng)頁設(shè)計
  • 響應(yīng)式網(wǎng)頁設(shè)計是一種設(shè)計網(wǎng)頁的方法。
  • 這種方法主要使用媒體查詢讓網(wǎng)頁具有根據(jù)設(shè)備的類型和特點應(yīng)用CSS樣式的能力。
• 2.物理像素是什么
  • 物理像素就是會發(fā)光的二極管。
    解釋：
• 物理像素是一種客觀存在的物理單元。
• 物理像素是每一塊屏幕實際擁有的像素。
• 每一個物理像素在通電后會發(fā)光。
• 每一個物理像素都使用紅綠藍(lán)三種光控制。
• 每一塊屏幕的物理像素數(shù)目在出廠的時候都已經(jīng)設(shè)置固定了。
• 我們常說的手機(jī)的物理分辨率就是指物理像素。
• 3.邏輯像素是什么
  • 邏輯像素是一種用于描述顏色和位置的信息單元，它是一種虛擬像素，用于通知 物理像素如何發(fā)光。
• 4.像素比是什么 （像素比 = 物理像素 / 邏輯像素 )
• 5.如何查詢像素比
  • window.devicePixelRatio
• 6.如何查詢你手機(jī)屏幕的邏輯像素( 邏輯像素 = 物理像素 / 像素比)
• 7.viewport是什么
  • viewport就是視口的意思，指移動端渲染網(wǎng)頁的區(qū)域。
• 8.如何設(shè)置viewport
  • 可以通過<meta> 標(biāo)簽設(shè)置移動端視口的大小和縮放。
• 9.iOS的視口默認(rèn)多寬
  • IOS默認(rèn)視口的寬度為980px
• 10.媒體查詢是什么
  • 媒體查詢是一種查詢訪問設(shè)備的技術(shù)
• 11.媒體查詢的用法有幾種
  • 通過為<link>標(biāo)簽設(shè)置media屬性定位媒體
  • 或通過為<style>標(biāo)簽設(shè)置media屬性定位媒體
  • 或通過@media規(guī)則在CSS文件中定位媒體
• 12.媒體查詢由哪兩部分構(gòu)成
  • 由媒體類型和條件表達(dá)式組成
• 13.媒體查詢的語法是什么
  • 每個媒體特性表達(dá)式必須用括號括起來。
  • 媒體設(shè)備和媒體特性表達(dá)式之間使用邏輯運(yùn)算符連接
    - and
    - not
    - only
    - ,
  • 媒體查詢不區(qū)分大小寫。
• 14.實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計的步驟
  • 第一步：設(shè)置視口
  • 第二步：設(shè)置媒體查詢：使用Media Query判斷用戶訪問設(shè)備，從而應(yīng)用css樣式
• 15.媒體查詢的邏輯運(yùn)算符有哪幾個
  • and
  • not
  • only
  • ,
• 16.使用min-width和max-width設(shè)置斷點時的原則是什么？
  • min-width向上兼容
  • max-width向下兼容

案例

非響應(yīng)式網(wǎng)站

W3C

響應(yīng)式網(wǎng)站（視口+媒體查順+1個html+多套樣式）

極客公園
網(wǎng)易

響應(yīng)式適配（視口+js判斷+1個html+1套樣式）

淘寶
京東

viewport是什么

定義

• viewport是視口的意思，指移動端酸軟網(wǎng)頁的區(qū)域 - view:是”看“的意思
• port:是端口的意思
• vieport:翻譯為“視口”
• viewport：是沒有大小的。就是vieport不等于網(wǎng)頁可見區(qū)域的大小
• 視口可以通過meta標(biāo)簽設(shè)置
• 如果不設(shè)置視口，那么is的視口默認(rèn)為980px

設(shè)置viewport

• 可以通過<meta>標(biāo)簽設(shè)置移動視口的大小和縮放。它的語法是：

<meta name='viewport'  content='寬度 初始比例 最大比例 最小比例 是否縮放‘

五個屬性

第一個

• width/height：設(shè)置視口的寬度和高度
• 示例：屬性值為數(shù)值，無單位。表示視口的寬度為375px

<meta name='viewport' content='width=375'>

• 示例：屬性值為device-width，表示把視口的寬度設(shè)置為設(shè)備可視區(qū)域

<meta name='viewport' content='width=device-width'>

第二個

• initial-scale:設(shè)置視口的初始比例。
  語法：

<meta name='viewport' content='with=device-width, initial-scale=1'>

• 屬性值：0.1- 10
• 默認(rèn)值：1
• 0.1-1：表示縮小
• 1-10：表示放大

媒體查順是什么

• 媒體查順是一種用戶設(shè)備的技術(shù)
• 媒體查順是由media屬性和@media規(guī)則構(gòu)成。有以下三種用法，
  • media屬性可以設(shè)置在<style>標(biāo)簽上
  • media屬性可以設(shè)置在<link>標(biāo)簽上
  • @media規(guī)則可以設(shè)置在樣式表里
• 通過媒體查順，我們可以查順到用戶類型和設(shè)備特征

常見設(shè)備類型

• screen:所有有電子屏幕設(shè)備
• print：打印機(jī)
• speech：閱讀器
• handle：手持設(shè)備
• all：所有設(shè)備

常見設(shè)備特性

• width
• height
• orientation
• hover
• resolution
• aspect-ratio

媒體查順的語法

meida屬性

<style media='查順規(guī)則‘>
</style>

@meida規(guī)則

<link href='print.css'media='查順規(guī)則‘>
<link href='screen.css'media='查順規(guī)則‘>

@meida規(guī)則

/*css文件*/
@meida 查順規(guī)則 {
/*這里寫樣式代碼*/
}

查順規(guī)則

• 測試工作由媒體類型+媒體特性表達(dá)式構(gòu)成
• 媒體類型和媒體特性表達(dá)式使用邏輯操作符（and,not,only,,)鏈接
• 操作符之間必須有空格m
• 所有的媒體特性表達(dá)式必須用小括號括起來
• 不區(qū)分大小寫

示例

/在橫向屏幕/

邏輯運(yùn)算符

• 邏輯運(yùn)算符 not、and 和 only 可用于組成復(fù)雜的媒體查詢。您還可以通過用逗號分隔多個媒體查詢將它們組合成一個規(guī)則。
• and :用于將多個媒體特征組合到一個媒體查詢中，要求每個鏈接的特征返回 true 以使查詢?yōu)?true。它還用于將媒體功能與媒體類型連接起來。
• not: 用于否定媒體查詢，如果查詢將返回 false，則返回 true。如果出現(xiàn)在逗號分隔的查詢列表中，它只會否定應(yīng)用它的特定查詢。如果使用 not 運(yùn)算符，還必須指定媒體類型。
• only:僅當(dāng)整個查詢匹配時才應(yīng)用樣式。它對于防止舊瀏覽器應(yīng)用選定的樣式很有用。當(dāng)不只使用時，舊瀏覽器會將查詢屏幕和 (max-width: 500px) 解釋為屏幕，忽略查詢的其余部分，并將其樣式應(yīng)用于所有屏幕。如果使用 only 運(yùn)算符，則還必須指定媒體類型。
• ,: 逗號用于將多個媒體查詢組合成一個規(guī)則。逗號分隔列表中的每個查詢都與其他查詢分開處理。因此，如果列表中的任何查詢?yōu)檎?，則整個媒體語句返回真。換句話說，列表的行為類似于邏輯或運(yùn)算符。

viewport就是視口的意思，指移動端渲染網(wǎng)頁的區(qū)域。

解釋：

• view: 是“看”的意思。
• Port: 是“端口”的意思
• Viewport: 翻譯為“視口”。
• viewport是沒有大小的。就是viewport不等于網(wǎng)頁可見區(qū)域的大小。
• 視口可以通過meta標(biāo)簽設(shè)置
• 在進(jìn)行響應(yīng)式網(wǎng)頁設(shè)計的時候，第一步就是設(shè)置視口，即把渲染頁面的視口尺寸設(shè)置為與設(shè)備的可見區(qū)域的尺寸一致。
• 設(shè)置viewport的主要目的是為了創(chuàng)建更合理的視口尺寸。設(shè)置視口是制作響應(yīng)式網(wǎng)頁的第一步。
• 視口是 HTML 5 中的元元素，用于根據(jù)用戶的設(shè)備縮放內(nèi)容。這對于響應(yīng)式網(wǎng)頁設(shè)計很重要。

復(fù)習(xí)

• js的三個組成部分
• ECMAScript:ES
• DOM:文檔對象模型
• NOM:瀏覽器對象模型
• window.devicepixelRatio
  定義：用于查詢
• device:設(shè)備
• pixel:像素
• Ratio:比例

設(shè)置響應(yīng)式圖片