1.定義和使用
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式晦雨。當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式种冬，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的舔糖。
2.@media與@media screen區(qū)別
@media screen的css在打印設(shè)備里是無效的娱两，而@media在打印設(shè)備里是有效的，如果css需要用在打印設(shè)備里金吗，那么就用@media 十兢，否則，就用@media screen摇庙。
不過這只是籠統(tǒng)的做法旱物，其實(shí)如果把“screen”換為“print”，寫為@media print卫袒，那么該css就可用到打印設(shè)備上了宵呛，但要注意，@media print聲明的css只能在打印設(shè)備上有效
3.Media Queries工作方式:
在media屬性里：
● screen 只是媒體類型里的一種玛臂，其中常用的有：
（1）all——用于所有設(shè)備 （2）print —— 用于打印機(jī)和打印預(yù)覽 （3）screen——用于電腦屏幕烤蜕，平板電腦，智能手機(jī)等迹冤。 （4）speech——應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備
● and 被稱為關(guān)鍵字讽营，其他關(guān)鍵字還包括 not(排除某種設(shè)備)，only(限定某種設(shè)備)
● (min-width: 400px) 就是媒體特性泡徙，其被放置在一對圓括號中橱鹏。完整的特性參看 相關(guān)的Media features部分
3.1 直接在link中判斷設(shè)備的尺寸，然后引用不同的css文件
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 400px)">
當(dāng)屏幕的寬度大于等于400px的時候堪藐，應(yīng)用 A.css
<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">
當(dāng)屏幕的寬度大于600小于800px時莉兰，應(yīng)用B.css
3.2 另一種方式，即是直接寫在 style 標(biāo)簽里或css文件中
@media screen and (max-width: 600px) { /*當(dāng)屏幕尺寸小于600px時礁竞，應(yīng)用下面的CSS樣式*/
body {
background: #ccc;
}
}
4.Media使用說明舉例
4.1前端響應(yīng)式布局最出名的框架莫過于 Bootstrap
/* 超小屏幕（手機(jī)糖荒，小于 768px） /
/ 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動設(shè)備優(yōu)先的嗎模捂？） /
/ 小屏幕（平板捶朵，大于等于 768px） /
@media (min-width: @screen-sm-min) { ... }
/ 中等屏幕（桌面顯示器蜘矢，大于等于 992px） /
@media (min-width: @screen-md-min) { ... }
/ 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
4.2自適應(yīng)代碼
@media (min-width: 768px){ //>=768的設(shè)備 }
@media (min-width: 992px){ //>=992的設(shè)備 }
@media (min-width: 1200){ //>=1200的設(shè)備 }
注意下順序综看，如果你把@media (min-width: 768px)寫在了下面那么就是錯誤的品腹！因?yàn)槿绻?440,由于1440>768那么你的1200就會失效。
-
劃重點(diǎn)
用min-width時红碑，小的放上面大的在下面舞吭，同理如果是用max-width那么就是大的在上面，小的在下面
4.3在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)
@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) { }
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ }
@media only screen and (max-width: 479px) { }
