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