導(dǎo)讀

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

知識(shí)點(diǎn)

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

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

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

解釋：

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

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

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

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

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

案例

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

• w3school

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

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

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

• 淘寶
• 京東

Viewport是什么

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

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

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

設(shè)置Viewport

可以通過<meta> 標(biāo)簽設(shè)置移動(dòng)端視口的大小和縮放涯冠。

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

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

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

viewport包含6個(gè)屬性：

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

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

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

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

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

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

3. initial-scale：控制第一次加載頁面時(shí)的縮放級(jí)別鸵鸥。屬性值：

• 0.1 - 10
• 默認(rèn)值：1。
• 負(fù)值：忽略拆讯。

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

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

• 0.1 - 10
• 默認(rèn)值：0.1养叛。
• 負(fù)值：忽略。

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

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

• 0.1- 10弃甥。
• 任何小于 3 的值都無法訪問。
• 默認(rèn)值：10汁讼。
• 負(fù)值：忽略淆攻。

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

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

• 有效值：0嘿架、1瓶珊、no 或 yes。
• 默認(rèn)值：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 可能會(huì)給有視力障礙（例如低視力）的用戶帶來可訪問性問題蝉娜。 WCAG 要求至少 2 倍縮放唱较；但是，最佳做法是啟用 5 倍變焦

Media Query是什么

• Media Query的中文：媒體查詢
• 媒體查詢是一種查詢訪問設(shè)備的技術(shù)召川∧匣海可以查詢訪問設(shè)備的類型和特性，根據(jù)媒體查詢的結(jié)果應(yīng)用不同的CSS樣式荧呐。

媒體查詢的三種用法

第一種：通過為<link>標(biāo)簽設(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>標(biāo)簽設(shè)置media屬性定位媒體，例如：

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

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

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

媒體查詢的語法

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

媒體類型

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

• all： 所有媒體設(shè)備庵楷。
• print ： 打印機(jī)
• screen : 計(jì)算機(jī)屏幕罢艾、平板屏幕、智能手機(jī)屏幕等設(shè)備屏幕尽纽。
• speech: 屏幕閱讀設(shè)備

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

@media print {
  /* … */
}

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

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

媒體特性表達(dá)式

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

示例：查詢鼠標(biāo)懸停

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

示例：查詢視口寬度

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

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

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

示例：查詢兩個(gè)特性（and運(yùn)算符）

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

邏輯運(yùn)算符

邏輯運(yùn)算符 not弄贿、and 和 only 可用于組成復(fù)雜的媒體查詢春锋。您還可以通過用逗號(hào)分隔多個(gè)媒體查詢將它們組合成一個(gè)規(guī)則。

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

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

only:僅當(dāng)整個(gè)查詢匹配時(shí)才應(yīng)用樣式赠堵。它對(duì)于防止舊瀏覽器應(yīng)用選定的樣式很有用小渊。當(dāng)不只使用時(shí)，舊瀏覽器會(huì)將查詢屏幕和 (max-width: 500px) 解釋為屏幕茫叭，忽略查詢的其余部分酬屉，并將其樣式應(yīng)用于所有屏幕。如果使用 only 運(yùn)算符揍愁，則還必須指定媒體類型梆惯。

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

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

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

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

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

媒體查詢示例

一锨络、最大寬度Max Width

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

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

二羡儿、最小寬度Min Width

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

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

三掠归、多個(gè)Media Queries使用

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

Media Query可以結(jié)合多個(gè)媒體查詢，換句話說悄泥，一個(gè)Media Query可以包含0到多個(gè)表達(dá)式虏冻，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種Media Type弹囚。正如上面的其表示的是當(dāng)屏幕在600px-900px之間時(shí)采用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è)備的實(shí)際分辨率庶骄，也就是指可視面積分辨率

五、iPhone4

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

上面的樣式是專門針對(duì)iPhone4的移動(dòng)設(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ù)情況下，移動(dòng)設(shè)備iPad上的Safari和在iPhone上的是相同的音诈，只是他們不同之處是iPad聲明了不同的方向幻碱，比如說上面的例子，在縱向(portrait)時(shí)采用portrait.css來渲染頁面细溅；在橫向（landscape）時(shí)采用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手機(jī)在不同分辨率提供特定樣式喇聊，這樣就可以解決屏幕分辨率的不同給android手機(jī)的頁面重構(gòu)問題恍风。

八、not關(guān)鍵字

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

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

九、only關(guān)鍵字

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

only用來定某種特定的媒體類型窜骄，可以用來排除不支持媒體查詢的瀏覽器锦募。其實(shí)only很多時(shí)候是用來對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設(shè)備邻遏，正常調(diào)用樣式糠亩，此時(shí)就當(dāng)only不存在；對(duì)于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備准验，這樣就會(huì)不讀了樣式赎线，因?yàn)槠湎茸xonly而不是screen；另外不支持Media Qqueries的瀏覽器糊饱，不論是否支持only垂寥，樣式都不會(huì)被采用。

十另锋、其他

在Media Query中如果沒有明確指定Media Type滞项，那么其默認(rèn)為all，如：

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

另外還有使用逗號(hào)（砰蠢，）被用來表示并列或者表示或蓖扑，如下

<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/