導(dǎo)讀

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

響應(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端的視口有所不同：

2.更改視口比例：雙擊汛闸、捏合、捏開（不能更改大小)
3.可以設(shè)置網(wǎng)頁的視口屬性 | 通過調(diào)整窗口大小改變視口大小 |

設(shè)置Viewport

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

如果不設(shè)置視口的尺寸诸老，移動設(shè)備通常會自動優(yōu)化網(wǎng)頁的顯示。在iOS系統(tǒng)上視口默認為980px寬钳恕。如果你希望實現(xiàn)更加復(fù)雜合理的優(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ù)曹铃＄智鳎可以查詢訪問設(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 可用于組成復(fù)雜的媒體查詢绊序。您還可以通過用逗號分隔多個媒體查詢將它們組合成一個規(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)檎妫瑒t整個媒體語句返回真蜡吧。換句話說毫蚓，列表的行為類似于邏輯或運算符。

示例：查詢屏幕設(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è)備上。