一、媒體查詢

CSS3新增的功能，能夠讓我們的HTML頁面，智能的根據(jù)用戶的瀏覽器寬度，來選擇性加載樣式表。
 
在用link標(biāo)記引用樣式表的時(shí)候，加上media屬性，表示媒體查詢（media query），實(shí)際上就是讓這個(gè)css，不是無條件加載的，而是當(dāng)瀏覽器窗口滿足一定的寬度的時(shí)候，再進(jìn)行加載。
 

<link rel="stylesheet" type="text/css" href="css/1.css" media="(min-width:750px)"> <link rel="stylesheet" type="text/css" href="css/2.css" media="(max-width:749px)">

 
屬性：

media="(min-width:750px)"

指的是當(dāng)瀏覽器的窗口尺寸寬度，最小為750px的時(shí)候，加載樣式表。換句話說，就是當(dāng)用戶瀏覽器屏幕尺寸大于等于750px的時(shí)候，才加載這個(gè)樣式表。
 
屬性：

media="(max-width:749px)"

指的是當(dāng)瀏覽器的窗口尺寸寬度，最大為749px的時(shí)候，加載樣式表。換句話說，就是當(dāng)用戶瀏覽器屏幕尺寸小于等于749px的時(shí)候，才加載這個(gè)樣式表。
 
媒體查詢功能是CSS3中的功能，IE9里面才開始兼容。智能手機(jī)（安卓、蘋果、windows phone）中的瀏覽器都是兼容媒體查詢的。
 
我們的綠色食品網(wǎng)，就是用媒體查詢功能，根據(jù)用戶的瀏覽器尺寸的寬度的不同，來更換不同的樣式表。
 

<link href="css/pad.css" type="text/css" rel="stylesheet" media="(max-width:981px) and (min-width:620px)" /> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="(max-width:619px)" />

 
屬性：

media="(max-width:981px) and (min-width:620px)"

現(xiàn)在，這個(gè)樣式表的加載條件是，用戶的瀏覽器尺寸，小于等于981px且大于等于620px。
換句話說，就是當(dāng)用戶的瀏覽器尺寸在620~981之間的時(shí)候，才加載這個(gè)樣式表。
 
屬性：

media="(max-width:619px)"

小于等于619px的時(shí)候，加載這個(gè)樣式表
 
 
IE6、7、8中，如果看見有media屬性的link標(biāo)記，會(huì)怎么樣？
瀏覽器會(huì)忽略這樣的標(biāo)記。不過不用擔(dān)心，因?yàn)槭謾C(jī)里面的瀏覽器都是支持的。

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui