問題描述

做手機網(wǎng)頁時，媒體查詢要做哪幾個像素的

問題解答

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

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

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

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