css3 - css媒體查詢

問題描述

做手機網頁時，媒體查詢要做哪幾個像素的

問題解答

我們適配手機，不做媒體查詢，所有樣式用 rem 值。設計師按iphone6 plus 出圖，iphone6 plus 寬度 414px， 把根元素的字體設置為 414 / 4.14 = 100px, 也就是 1rem = 100px, 然后所有元素的尺寸設置成 （設計圖尺寸 / 100） rem, 就可以在不同手機等比縮放了。

媒體查詢最適合擁有響應式設計的頁面！媒體查詢最適合擁有響應式設計的頁面！媒體查詢最適合擁有響應式設計的頁面！重要的事情說三遍。像我這邊是沒有采用過多的媒體查詢的。媒體查詢在我這邊是干一種活：

如果你的頁面加了viewport之后，移動端的1px等同于pc端的1px；換句話講，一個18px的字，在移動端和pc端上看起來都是一樣的。正因為這樣，在移動端布局中我放棄rem這個單位，直接用px布局。而又因為，移動端大多都是自適應，自適應的網站在pc端上看起來是非常丑的，所以必須得做出一點樣式性的變化，這時候就采用了媒體查詢。我一般都是查詢設備寬度是否大于768px，這個剛好是ipad的分辨率，超過就是Pc端，否則就是移動端。

上文說過，加了viewport之后，18px的字在各個分辨率下大小都是差不多的。在移動端完全可以使用px進行布局，那么還要rem干嘛？我的經驗，rem適合那些希望在各個設備分辨率下，頁面比例保持一致的頁面。我們項目里面存在一個rem.js文件，專門計算設備的分辨率，然后將1rem設置為分辨率寬度的十分之一。假如說，設計稿的寬度是2048px，設計稿里面有一個100px的正方形，那么一個很簡單的計算方式就出來了$$ {css.height / ps.height}={screen.height / 2048px} $$$$ 1rem={screen.height / 10} $$得到$$ css.height={ ps.height / 204.8px }$$css.height單位為rem當所有樣式使用rem單位，不管分辨率多少，頁面比例不會亂，一般來說，這個算出來，取小數點后兩位有效數字，基本上就已經很精確了。