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