其實(shí)學(xué)校自學(xué)前端的時(shí)候都不知道媒體查詢(xún)，在實(shí)際工作中慢慢接觸到了盛嘿。最近做的項(xiàng)目中娜饵，碰到了前端當(dāng)中很多人都會(huì)碰到的問(wèn)題，不同瀏覽器的類(lèi)型以及不同版本的瀏覽器的兼容性小染。其實(shí)在各大主流瀏覽器更新最新版本或者是接近最新版本的時(shí)候翘瓮，網(wǎng)頁(yè)頁(yè)面顯示的內(nèi)容都不會(huì)太大，是因?yàn)樗麄兌贾С謍tm5和css3裤翩。
使用@media查詢(xún)资盅，可以針對(duì)不用的媒體類(lèi)型定義不同的樣式，也可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式踊赠，特別是要響應(yīng)式web設(shè)計(jì)
@media瀏覽器的支持情況
@ media的寫(xiě)法
在<style></style>里面@media mediatype (常用的媒體類(lèi)型是screen,用于電腦屏幕,平板電腦,手機(jī)等) and|not|only(media feature){ }
媒體功能
aspect-ratio定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的比率
color定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)今穿。如果不是彩色設(shè)備，則值等于0
color-index定義在輸出設(shè)備的彩色查詢(xún)表中的條目數(shù)伦籍。如果沒(méi)有使用彩色查詢(xún)表蓝晒，則值等于0
device-aspect-ratio定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的比率。
device-height定義輸出設(shè)備的屏幕可見(jiàn)高度帖鸦。
device-width定義輸出設(shè)備的屏幕可見(jiàn)寬度芝薇。
grid用來(lái)查詢(xún)輸出設(shè)備是否使用柵格或點(diǎn)陣。
height定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度富蓄。
max-aspect-ratio定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最大比率剩燥。
max-color定義輸出設(shè)備每一組彩色原件的最大個(gè)數(shù)。
max-color-index定義在輸出設(shè)備的彩色查詢(xún)表中的最大條目數(shù)立倍。
max-device-aspect-ratio定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最大比率灭红。
max-device-height定義輸出設(shè)備的屏幕可見(jiàn)的最大高度。
max-device-width定義輸出設(shè)備的屏幕最大可見(jiàn)寬度口注。
max-height定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域高度变擒。
max-monochrome定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最大單色原件個(gè)數(shù)。
max-resolution定義設(shè)備的最大分辨率寝志。
max-width定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域?qū)挾取?/p>
min-aspect-ratio定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的最小比率娇斑。
min-color定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)策添。
min-color-index定義在輸出設(shè)備的彩色查詢(xún)表中的最小條目數(shù)。
min-device-aspect-ratio定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最小比率毫缆。
min-device-width定義輸出設(shè)備的屏幕最小可見(jiàn)寬度唯竹。
min-device-height定義輸出設(shè)備的屏幕的最小可見(jiàn)高度。
min-height定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域高度苦丁。
min-monochrome定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù)
min-resolution定義設(shè)備的最小分辨率浸颓。
min-width定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域?qū)挾取?/p>
monochrome定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備旺拉，則值等于0
orientation定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度是否大于或等于寬度产上。
resolution定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcm
scan定義電視類(lèi)設(shè)備的掃描工序蛾狗。
width定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾取?/p>
——————————————————————————我是分割線(xiàn)
通常我們看到的css3媒體查詢(xún)的寫(xiě)法是這樣的
@media screen and (max-device-width:960px){
background:red;
}
上述的代碼表示的是小于960px的設(shè)備的背景色顯示紅色
css2 媒體查詢(xún)的寫(xiě)法
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
就是在head標(biāo)簽中插入以上的的一段代碼
<link rel="stylesheet" type="text/css" media="screen and(max-width:960px)" href="stylesheet">
上面用css2改寫(xiě)css3代碼
另外還要記得還要走幾步
1、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0">沉桌，這根禁止響應(yīng)式相反
這段代碼的幾個(gè)參數(shù)解釋?zhuān)?/b>
width = device-width：寬度等于當(dāng)前設(shè)備的寬度
initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）
minimum-scale：允許用戶(hù)縮放到的最小比例（默認(rèn)設(shè)置為1.0）
maximum-scale：允許用戶(hù)縮放到的最大比例（默認(rèn)設(shè)置為1.0）
user-scalable：用戶(hù)是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no谢鹊，因?yàn)槲覀儾幌Ｍ脩?hù)放大縮小頁(yè)面）
2、因?yàn)镮E8既不支持HTML5也不支持CSS3 Media留凭，所以我們需要加載兩個(gè)JS文件撇贺，來(lái)保證我們的代碼實(shí)現(xiàn)兼容效果：
<!--[if it IE 9]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.min.js"></script>
<!--[endif]-->
另補(bǔ)：
1.如果要想樣式兼容各種瀏覽器，五大主流瀏覽器冰抢，谷歌、火狐艘狭、歐朋挎扰、safra，他們的內(nèi)核不一樣巢音，presto（火狐）遵倦、gecko（opear前內(nèi)核，現(xiàn)在已改為Google Chrome的Blink內(nèi)核）官撼、trident（IE）梧躺、webkit（Safari內(nèi)核,Chrome內(nèi)核原型,開(kāi)源)、Blink傲绣÷痈纾基于webkit內(nèi)核的在樣式前面加上-webkit-，基于gecko在前面加上-o-,基于presto在前面加上-moz-
2秃诵、如果想兼容不同屏幕尺寸的续搀，需要用媒體查詢(xún)或者用響應(yīng)式框架，如bootstarp或者移動(dòng)端的zepto.js等
3菠净、如果想兼容ie8以下的版本禁舷，需要引入
response.js和html5shiv.js文件,因?yàn)閕e8不兼容html5也不支持css3的Media
如有錯(cuò)誤彪杉，請(qǐng)指出，互相交流牵咙，共同進(jìn)步派近！
