css3 - css媒体查询

Question

做手机网页时，媒体查询要做哪几个像素的

Answer 1

我们适配手机，不做媒体查询，所有样式用 rem 值。设计师按iphone6 plus 出图，iphone6 plus 宽度 414px， 把根元素的字体设置为 414 / 4.14 = 100px, 也就是 1rem = 100px, 然后所有元素的尺寸设置成 （设计图尺寸 / 100） rem, 就可以在不同手机等比缩放了。

Answer 2

媒体查询最适合拥有响应式设计的页面！
媒体查询最适合拥有响应式设计的页面！
媒体查询最适合拥有响应式设计的页面！
重要的事情说三遍。
像我这边是没有采用过多的媒体查询的。媒体查询在我这边是干一种活：

判断是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.8px }$$
css.height单位为rem
当所有样式使用rem单位，不管分辨率多少，页面比例不会乱，一般来说，这个算出来，取小数点后两位有效数字，基本上就已经很精确了。