問題描述

做手機(jī)網(wǎng)頁時(shí)，媒體查詢要做哪幾個(gè)像素的

問題解答

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

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

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

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