導讀

• 響應(yīng)式網(wǎng)頁設(shè)計是什么
• 實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計的方法
• 響應(yīng)式網(wǎng)站案例
• viewport是什么
• 設(shè)置viewport
• Media Query是什么
• 設(shè)置Media Query的三種用法
• 媒體查詢的語法
• 常見媒體類型
• 常見媒體特性
• 常見邏輯運算符
• 媒體查詢示例
• 工具

知識點

1. 什么是響應(yīng)式網(wǎng)頁設(shè)計
2. 物理像素是什么
3. 邏輯像素是什么
4. 像素比是什么 （像素比 = 物理像素 / 邏輯像素 )
5. 如何查詢像素比
6. 如何查詢你手機屏幕的邏輯像素( 邏輯像素 = 物理像素 / 像素比)
7. viewport是什么
8. 如何設(shè)置viewport
9. iOS的視口默認多寬
10. 媒體查詢是什么
11. 媒體查詢的用法有幾種
12. 媒體查詢由哪兩部分構(gòu)成
13. 媒體查詢的語法是什么
14. 實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計的步驟
15. 媒體查詢的邏輯運算符有哪幾個
16. 使用min-width和max-width設(shè)置斷點時的原則是什么？

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

• 響應(yīng)式網(wǎng)頁設(shè)計是一種設(shè)計網(wǎng)頁的方法。
• 這種方法主要使用媒體查詢讓網(wǎng)頁具有根據(jù)設(shè)備的類型和特點應(yīng)用CSS樣式的能力。

解釋：

• 設(shè)計：設(shè)想、計劃。設(shè)計就是把想法實現(xiàn)。
• 網(wǎng)頁設(shè)計：按照一定的想法布局網(wǎng)頁內(nèi)容。
• 傳統(tǒng)網(wǎng)頁設(shè)計：主要針對PC端瀏覽器而設(shè)計，不具備響應(yīng)設(shè)備類型和特性的能力，故不能針對多終端設(shè)備和尺寸的網(wǎng)頁進行優(yōu)化。
• 移動互聯(lián)網(wǎng)時代：隨著HTML 5的視口的出現(xiàn)及CSS3的media規(guī)則的出現(xiàn)。網(wǎng)頁具備了查詢訪問設(shè)備和設(shè)備特性的能力，響應(yīng)式網(wǎng)頁設(shè)計應(yīng)用而生。
• 響應(yīng)：指讓我們的網(wǎng)頁能夠自動查詢用戶的訪問設(shè)備，并根據(jù)查詢結(jié)果應(yīng)用不同的CSS樣式。

實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計的步驟

第一步：設(shè)置視口

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

第二步：設(shè)置媒體查詢：使用Media Query判斷用戶訪問設(shè)備，從而應(yīng)用css樣式

案例

非響應(yīng)式網(wǎng)頁設(shè)計案例

• w3school

響應(yīng)式網(wǎng)頁設(shè)計：媒體查詢

• 小米
• 極客公園
• https://dribbble.com
• https://colly.com

響應(yīng)式網(wǎng)頁設(shè)計：適配

• 淘寶
• 京東

Viewport是什么

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

• view: 是“看”的意思。
• Port: 是“端口”的意思
• Viewport: 翻譯為“視口”。
• viewport是沒有大小的。就是viewport不等于網(wǎng)頁可見區(qū)域的大小。
• 視口可以通過meta標簽設(shè)置
• 在進行響應(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è)計很重要。

PC端視口：指網(wǎng)頁的可見區(qū)域。移動端的視口與PC端的視口有所不同：

設(shè)置Viewport

可以通過<meta> 標簽設(shè)置移動端視口的大小和縮放。

如果不設(shè)置視口的尺寸，移動設(shè)備通常會自動優(yōu)化網(wǎng)頁的顯示。在iOS系統(tǒng)上視口默認為980px寬。如果你希望實現(xiàn)更加復雜合理的優(yōu)化，通常需要修改移動設(shè)備的默認視口設(shè)置。

設(shè)置視口屬性的語法是：

<meta name="viewport" content="屬性列表" /> 

viewport包含6個屬性：

1. width：設(shè)置視口的寬度。屬性值：

• number：1- 10000。數(shù)字表示視口的像素寬度，無單位，不支持負值。比如width=600
• device-width：等于100vw或100%。

<meta name="viewport" content="width:320" /> 

2. height：設(shè)置視口的高度。屬性值：

• number：1- 10000。數(shù)字表示視口的像素高度，無單位，不支持負值。比如height=600
• device-height：等于100vw或100%。

<meta name="viewport" content="height:640" /> 

3. initial-scale：控制第一次加載頁面時的縮放級別。屬性值：

• 0.1 - 10
• 默認值：1。
• 負值：忽略。

<meta name="viewport" content="initial-scale:1" /> 

4. minimum-scale：控制頁面上允許的縮小程度。屬性值：

• 0.1 - 10
• 默認值：0.1。
• 負值：忽略。

<meta name="viewport" content="minimun-scale:2" /> 

5. maximum-scale：控制頁面允許放大多少。屬性值

• 0.1- 10。
• 任何小于 3 的值都無法訪問。
• 默認值：10。
• 負值：忽略。

<meta name="viewport" content="maxinum-scale:6" /> 

6. user-scalable：控制頁面上是否允許放大和縮小操作。屬性值:

• 有效值：0、1、no 或 yes。
• 默認值：1，與 yes 相同。

<meta name="viewport" content="user-scalable:yes" /> 

視口的常規(guī)設(shè)置方法：

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

警告：1. 將 user-scalable值設(shè)置為 0（與否相同）違反了《Web 內(nèi)容可訪問性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能會給有視力障礙（例如低視力）的用戶帶來可訪問性問題。 WCAG 要求至少 2 倍縮放；但是，最佳做法是啟用 5 倍變焦

Media Query是什么

• Media Query的中文：媒體查詢
• 媒體查詢是一種查詢訪問設(shè)備的技術(shù)?？梢圆樵冊L問設(shè)備的類型和特性，根據(jù)媒體查詢的結(jié)果應(yīng)用不同的CSS樣式。

媒體查詢的三種用法

第一種：通過為<link>標簽設(shè)置media屬性定位媒體，例如

<link href="css/style1.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style2.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="phone.css"  rel="stylesheet" media="screen and (max-width: 600px)"  />

第二種：或通過為<style>標簽設(shè)置media屬性定位媒體，例如：

<style type="text/css" media="screen">
  @import url("./css/style.css"); 
</style>

第三種：或通過@media規(guī)則在CSS文件中定位媒體，例如

/*css文件*/
@media not|only 媒體類型 and (媒體特性表達式) {
  CSS-Code;
}

媒體查詢的語法

• 媒體查詢通過可選的媒體設(shè)備和可選的媒體特性表達式組成
• 每個媒體特性表達式必須用括號括起來。
• 媒體設(shè)備和媒體特性表達式之間使用邏輯運算符連接
  • and
  • not
  • only
  • ,
• 媒體查詢不區(qū)分大小寫。

媒體類型

媒體類型指常見的媒體設(shè)備類型，媒體類型是可選的。

• all： 所有媒體設(shè)備。
• print ： 打印機
• screen : 計算機屏幕、平板屏幕、智能手機屏幕等設(shè)備屏幕。
• speech: 屏幕閱讀設(shè)備

示例：查詢打印機設(shè)備

@media print {
  /* … */
}

示例：查詢多個設(shè)備

@media screen, print {
  /* … */
}

媒體特性表達式

媒體特性通過表達式形式描述了用戶代理、輸出設(shè)備或環(huán)境的特征。

示例：查詢鼠標懸停

@media (hover: hover) {
  /* … */
}

示例：查詢視口寬度

@media (max-width: 1250px) {
  /* … */
}

示例：查詢彩色屏幕的設(shè)備

@media (color) {
  /* … */
}

示例：查詢兩個特性（and運算符）

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

邏輯運算符

邏輯運算符 not、and 和 only 可用于組成復雜的媒體查詢。您還可以通過用逗號分隔多個媒體查詢將它們組合成一個規(guī)則。

and :用于將多個媒體特征組合到一個媒體查詢中，要求每個鏈接的特征返回 true 以使查詢?yōu)?true。它還用于將媒體功能與媒體類型連接起來。

not: 用于否定媒體查詢，如果查詢將返回 false，則返回 true。如果出現(xiàn)在逗號分隔的查詢列表中，它只會否定應(yīng)用它的特定查詢。如果使用 not 運算符，還必須指定媒體類型。

only:僅當整個查詢匹配時才應(yīng)用樣式。它對于防止舊瀏覽器應(yīng)用選定的樣式很有用。當不只使用時，舊瀏覽器會將查詢屏幕和 (max-width: 500px) 解釋為屏幕，忽略查詢的其余部分，并將其樣式應(yīng)用于所有屏幕。如果使用 only 運算符，則還必須指定媒體類型。

,: 逗號用于將多個媒體查詢組合成一個規(guī)則。逗號分隔列表中的每個查詢都與其他查詢分開處理。因此，如果列表中的任何查詢?yōu)檎?，則整個媒體語句返回真。換句話說，列表的行為類似于邏輯或運算符。

示例：查詢屏幕設(shè)備+特性

@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

示例：反向查詢設(shè)備和特性（not 關(guān)鍵字不能用于否定單個特征查詢，只能用于否定整個媒體查詢)

@media only screen and (color) {
  /* … */
}

媒體查詢示例

一、最大寬度Max Width

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：當屏幕小于或等于600px時，將采用small.css樣式來渲染W(wǎng)eb頁面。

二、最小寬度Min Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：當屏幕大于或等于900px時，將采用big.css樣式來渲染W(wǎng)eb頁面。

三、多個Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query可以結(jié)合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關(guān)鍵字，以及一種Media Type。正如上面的其表示的是當屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。

四、設(shè)備屏幕的輸出寬度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代碼指的是iphone.css樣式適用于最大設(shè)備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實際分辨率，也就是指可視面積分辨率

五、iPhone4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的樣式是專門針對iPhone4的移動設(shè)備寫的。

六、iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大數(shù)情況下，移動設(shè)備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說上面的例子，在縱向(portrait)時采用portrait.css來渲染頁面；在橫向（landscape）時采用landscape.css來渲染頁面。

七、android

/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我們可以使用media query為android手機在不同分辨率提供特定樣式，這樣就可以解決屏幕分辨率的不同給android手機的頁面重構(gòu)問題。

八、not關(guān)鍵字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not關(guān)鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達式的設(shè)備。

九、only關(guān)鍵字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時就當only不存在；對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會被采用。

十、其他

在Media Query中如果沒有明確指定Media Type，那么其默認為all，如：

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外還有使用逗號（，）被用來表示并列或者表示或，如下

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。

工具

• https://www.browserstack.com/responsive
• https://ui.dev/amiresponsive
• ios分辨率
• Screen Dimensions for Devices
• width versus device-width
  https://viewportsizer.com/