一出皇、為什么需要媒體查詢
CSS3的媒體查詢模塊就是為了針對(duì)設(shè)備特性（width裆蒸、height等）設(shè)置特定的css樣式分井，可以在不改變當(dāng)前頁(yè)面內(nèi)容的情況下徘熔，為特定的一些設(shè)備定制顯示效果门躯。
二、媒體查詢語法
1.媒體查詢?cè)谝欢蜟SS后引入特定樣式
@media screen and (max-width:960px){
...
}
2.使用 CSS 的@import 指令在當(dāng)前樣式表中按條件引入其他樣式表
@import url("phone.css") screen and (max-width:360px);
3.利用媒體查詢引入特定的樣式文件
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
三酷师、媒體查詢可檢測(cè)的特性
- width：視口寬度
- height：視口高度
- device-width：渲染表面的寬度(對(duì)我們來說,就是設(shè)備屏幕的寬度)
- device-height：渲染表面的高度(對(duì)我們來說,就是設(shè)備屏幕的高度)
- orientation：檢查設(shè)備處于橫向還是縱向
- aspect-ratio：基于視口寬度和高度的寬高比讶凉。一個(gè) 16∶9 比例的顯示屏可以這樣定義 aspect-ratio: 16/9
- device-aspect-ratio：和 aspect-ratio 類似,基于設(shè)備渲染平面寬度和高度的寬高比
- color:每種顏色的位數(shù)。例如 min-color: 16 會(huì)檢測(cè)設(shè)備是否擁有 16 位顏色山孔。
- color-index:設(shè)備的顏色索引表中的顏色數(shù)懂讯。值必須是非負(fù)整數(shù)。
- monochrome:檢測(cè)單色幀緩沖區(qū)中每像素所使用的位數(shù)台颠。值必須是非負(fù)整數(shù),如
monochrome: 2 - resolution:用來檢測(cè)屏幕或打印機(jī)的分辨率,如 min-resolution: 300dpi褐望。還可以接受每厘米像素點(diǎn)數(shù)的度量值,如 min-resolution: 118dpcm。
- scan:電視機(jī)的掃描方式,值可設(shè)為 progressive(逐行掃描)或 interlace(隔行掃描)。如 720p HD 電視(720p 的 p 即表明是逐行掃描)匹配 scan: progressive,而 1080i HD 電視(1080i 中的 i 表明是隔行掃描)匹配 scan: interlace譬挚。
- grid:用來檢測(cè)輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備。
除 scan 和 grid 之外,都可使用 min 和 max 前綴來創(chuàng)建一個(gè)查詢范圍酪呻，如min-width:200px减宣、max-width:360px。
四玩荠、利用viewport禁止用戶縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1漆腌，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽阶冈； 尤其要注意的是content里多個(gè)屬性的設(shè)置一定要用分號(hào)+空格來隔開闷尿，如果不規(guī)范將不會(huì)起作用。
width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除）女坑，可以在頁(yè)面加載時(shí)最小化上下狀態(tài)欄填具。
注意：關(guān)于viewport，還有一個(gè)很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動(dòng)條匆骗，而且不是簡(jiǎn)單的“隱藏滾動(dòng)條”劳景， 是根本沒有這個(gè)功能。iphone 的safari 瀏覽器實(shí)際上從一開始就完整顯示了這個(gè)網(wǎng)頁(yè)碉就，然后用viewport 查看其中的一部分盟广。 當(dāng)你用手指拖動(dòng)時(shí)，其實(shí)拖的不是頁(yè)面瓮钥，而是viewport筋量。瀏覽器行為的改變不止是滾動(dòng)條，交互事件也跟普通桌面不一樣碉熄。
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
- 第一個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽桨武，它表示：允許全屏模式瀏覽；
- 第二個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽具被，它指定的iphone中safari頂端的狀態(tài)條的樣式玻募；
- 第三個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼
