做手机网页时，媒体查询要做哪几个像素的
学习是最好的投资！
我們適合手機，不做媒體查詢，所有樣式都用 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.8pxx$$ >css.height單位為rem當所有樣式使用rem單位，不管分辨率多少，頁面比例不會亂，一般來說，這個算出來，取小數點後兩位有效數字，基本上就已經很精確了。
我們適合手機，不做媒體查詢，所有樣式都用 rem 值。設計師按iphone6 plus 出圖，iphone6 plus 寬度414px， 把根元素的字體設定為414 / 4.14 = 100px, 也就是1rem = 100px, 然後所有元素的尺寸設定成（設計圖尺寸/ 100） rem, 就可以在不同手機等比縮放了。
媒體查詢最適合擁有響應式設計的頁面！
媒體查詢最適合擁有響應式設計的頁面！
媒體查詢最適合擁有響應式設計的頁面！
重要的事情說三次。
像我這邊是沒有採用過多的媒體查詢的。媒體查詢在我這邊是乾一種活：
判斷是pc端還是行動端
如果你的頁面加了viewport之後，行動端的1px等同於pc端的1px；換句話說，一個18px的字，在行動端和pc端上看起來都是一樣的。正因為這樣，在行動裝置佈局中我放棄rem這個單位，直接用px佈局。
而又因為，行動端大多都是自適應，自適應的網站在pc端上看起來是非常醜的，所以必須得做出一點樣式性的變化，這時候就採用了媒體查詢。我通常都是查詢設備寬度是否大於768px，這個剛好是ipad的分辨率，超過就是Pc端，否則就是移動端。
rem佈局的好處又是啥？
上文說過，加了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.8pxx$$ >css.height單位為rem
當所有樣式使用rem單位，不管分辨率多少，頁面比例不會亂，一般來說，這個算出來，取小數點後兩位有效數字，基本上就已經很精確了。