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

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

• 案例

• Viewport

  • viewport是什么
  • 設(shè)置viewport

• Media Query

  • Media Query是什么
  • 設(shè)置Media Query的三種用法
  • 媒體查詢的語法
  • 常見媒體類型
  • 常見媒體特性
  • 常見邏輯運算符
  • 媒體查詢示例

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

定義：
響應(yīng)式網(wǎng)頁設(shè)計就是讓網(wǎng)頁具備根據(jù)設(shè)備應(yīng)用css樣式的能力趋翻。
解釋：

• 響應(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)時代屯曹，傳統(tǒng)的頁面設(shè)計不適合小屏幕展示瓢喉。響應(yīng)式網(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.視口
2.設(shè)置媒體查詢：使用Media Query判斷用戶設(shè)備走贪。

第二種：通過js判斷用戶設(shè)備佛猛。

1.視口
2.使用js判斷用戶訪問設(shè)備

案例

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

• w3c
• 網(wǎng)易云音樂

響應(yīng)式網(wǎng)站
技術(shù): 視口+媒體查詢+1個html+多套樣式

• 極客公園
  響應(yīng)式網(wǎng)頁設(shè)計：適配
  技術(shù)：視口+JS判斷+多個html+1套樣式
• 淘寶
• 京東

vieport是什么

定義：
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

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

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

它的語法是：

<meat 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：控制第一次加載頁面時的縮放級別。屬性值：

• 默認值： 1
• 0.1 - 1：表示縮放
• 1 - 10：表示放大
  語法

<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樣式。

媒體查詢是什么

• 媒體查詢是一種查詢用戶設(shè)備的技術(shù)肺稀。
• 媒體查詢是由media屬性和@media規(guī)則構(gòu)成梗脾。
  • media屬性可以設(shè)置在<style>標簽上
  • media屬性可以設(shè)置在<link>標簽上
  • @media規(guī)則可以設(shè)置在樣式表里。
• 通過媒體查詢盹靴，我們可以查詢到用戶設(shè)備內(nèi)型和設(shè)備特性炸茧。
• 常見設(shè)備類型
  • screen: 所有有電子屏幕的設(shè)備
  • print: 打印機
  • speech： 閱讀器
  • handle：手持設(shè)備
  • all：所有設(shè)備
    示例：查詢打印機設(shè)備

@media print {
  /* … */
}

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

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

• 常見設(shè)備特性
  • width
  • height
  • orientaion
  • hover
  • resolution
  • aspect-ratio

媒體查詢的語法

meida屬性

<style media="查詢規(guī)則">
</style>

meida屬性

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

@media規(guī)則

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

查詢規(guī)則

• 查詢規(guī)則由媒體類型 + 媒體特性表達式構(gòu)成。
• 媒體類型和媒體特性表達式使用邏輯操作符(and稿静、not梭冠、only、,)連接改备，操作符前后必須有空格控漠。
• 所有的媒體特性表達必須用小括號括起來
• 不區(qū)分大小寫

示例

/*在橫向屏幕設(shè)備上 讓body的背景色顯示為綠色*/
/*在豎向屏幕設(shè)備上 讓body的背景色顯示為紅色*/
   @media screen and (orientation:landscape) {
            body {
                background-color: rgb(0, 255, 0);
            }
        }
        @media screen and (orientation:portrait) {
            body {
                background-color: rgb(0, 191, 255);
            }
        }

媒體特性表達式

媒體特性通過表達式形式描述了用戶代理、輸出設(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)檎婧逶停瑒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è)備上。

知識點

1.記住背景屬性
2.什么是響應(yīng)式網(wǎng)頁設(shè)計
3.物理像素是什么
4.邏輯像素是什么
5.像素比是什么（像素比 = 物理像素 / 邏輯像素）
6.如何查詢像素比磷杏。

7. 如何查詢你手機屏幕的邏輯像素( 邏輯像素 = 物理像素 / 像素比)

復習

JS的三個組成部分

• ECMASicript：ES
• DOM：文檔對象模型
• BOM：瀏覽器對象模型：就是一些于瀏覽器有關(guān)的方法的集合溜畅。讓你通過這

window.devicePixelRatio

• device: 像素
• Pixel: 比例
• Ratio：dpr