1）媒體查詢 @media 是個(gè)好東西，至少對(duì)像我一樣剛?cè)胄械男∏岸俗鲰憫?yīng)式是個(gè)不錯(cuò)的選擇。
①我們來(lái)看看媒體查詢 頁(yè)面最大寬度的標(biāo)準(zhǔn)寫法
1 @media screen and (max-width: 960px){ 2 body{ 3 background: #000000; 4 font-size:14px; 5 ... 6 } 7 }
解讀下代碼意思：當(dāng)頁(yè)面寬度小于960px時(shí)，使用以下對(duì)應(yīng)樣式表.
備注：screen 意思是告知設(shè)備在打印頁(yè)面時(shí)使用無(wú)襯線體，屏幕上顯示也用無(wú)襯線字體，
現(xiàn)在你會(huì)去打印一張網(wǎng)頁(yè)嗎？不會(huì)吧！所以目前網(wǎng)站都不會(huì)考慮用戶去打印網(wǎng)站頁(yè)面，
so...screen可以不用寫，直接省去.
②這是媒體查詢 頁(yè)面最小寬度的標(biāo)準(zhǔn)寫法
1 @media screen and (min-width:960px){ 2 body{ 3 background:#000000; 4 font-size:14px; 5 ... 6 } 7 }
代碼意思：當(dāng)頁(yè)面寬度大于960px時(shí)，使用以下對(duì)應(yīng)樣式表.
③當(dāng)然我們也可以媒體查詢一個(gè)頁(yè)面區(qū)間寬度，
1 @media screen and (min-width:960px) and (max-width:1200px){ 2 body{ 3 background:#000000; 4 font-size:14px; 5 ... 6 } 7 }
上面代碼大概意思是：當(dāng)頁(yè)面寬度大于960px，
小于1200px時(shí)([960px,1200px])，使用以下樣式表.
④ 媒體查詢的其他參數(shù)
以上是我們?cè)陂_(kāi)發(fā)過(guò)程中常用到的三種媒體查詢特性小于、大于、等于，
除此之外她還有其他特性，下面是我查找總結(jié)媒體查詢的其他參數(shù)和用法.
width/height：瀏覽器可視寬度(也叫視口)/瀏覽器可見(jiàn)高度.
device-width/device-height：設(shè)備屏幕寬度/設(shè)備屏幕高度.
color:檢測(cè)顏色的位數(shù)。（例如：min-color:32 就是檢測(cè)設(shè)備是否擁有32位顏色 #000000）
color-index:檢查設(shè)備索引顏色表中的顏色(顏色值不能小于0)。
orientation：判斷當(dāng)前設(shè)備是橫屏還是豎屏.
aspect-ratio:檢測(cè)瀏覽器可視寬度和高度的比例。(現(xiàn)在寬高比為16:9是最佳的，
比如我做的直播窗口，要求寬高比就是16:9)
device-aspect-ratio:檢測(cè)設(shè)備的寬度和高度的比例。
resolution:檢測(cè)屏幕或打印機(jī)的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：檢測(cè)輸出的設(shè)備是網(wǎng)格設(shè)備的還是位圖設(shè)備。
monochrome:檢測(cè)單色楨緩沖區(qū)域中的每個(gè)像素的位數(shù)。（這個(gè)很少用得到）
2）媒體查詢的"局限性"
我要說(shuō)的這個(gè)局限性，指的是它不能用在IE8以下，IE8以下就不說(shuō)了，
它目前應(yīng)該被前端罵的是 身殘志堅(jiān)了，IE8以下了 既不支持HTML5，也不支持CSS3的媒體查詢，
這個(gè)怎么搞...IE8以下放棄算求，但是有些公司，用戶又不多啊，
非得要求你小前端要響應(yīng)式IE8以下，還好可以在項(xiàng)目中導(dǎo)入Respond.js，
這樣使用CSS3的媒體查詢就有作用了，對(duì)于這個(gè)Respond.js，小生沒(méi)實(shí)打?qū)嵉挠眠^(guò)，在這里閑扯了下，
分享一篇知乎上關(guān)于這個(gè)Respond.js用法的文章給大家：https://www.zhihu.com/question/21634225
3）實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)，不止CSS3的媒體查詢能做
1. Bootstrap：
對(duì)于這些框架，我感覺(jué)都怕用，因?yàn)樗锩嫠袠?biāo)簽的樣式都有，
你引用就好了，是節(jié)省了開(kāi)發(fā)時(shí)間。對(duì)于我來(lái)說(shuō)，有點(diǎn)難把握，做完移動(dòng)端網(wǎng)站我就有點(diǎn)后悔用了它，
要說(shuō)，不管什么，會(huì)寫源生的才是最Nice的.
2. JS監(jiān)聽(tīng)視口寬度變化從而動(dòng)態(tài)更換CSS樣式表，達(dá)到最佳的響應(yīng)式：
這種方式，應(yīng)該是很多攻城獅都喜歡用的，因?yàn)樗_，對(duì)于代碼冗余，
后期維護(hù)這些都比較友好，你要知道，攻城獅一般都很強(qiáng)調(diào)用戶體驗(yàn)的.
等等...
【 微信掃一掃 】
