什么是最好的兼顾桌面和移动 Web 适配的响应式方案？

Question

rem 数值计算

如果利用 rem 来设置 css 的值，一般要通过一层计算才行，比如如果要设置一个长宽为 100px 的 div，那么就需要计算出 100px 对应的 rem 值是 100 / 16 =6.25rem

对于使用 sass 的工程

前端构建中，完全可以利用 scss 来解决这个问题，例如我们可以写一个 scss 的 function px2rem 即：

@function px2rem($px){
    $rem : 37.5px;
    @return ($px/$rem) + rem;
}

1. 由于我们所写出的页面是要在不同的屏幕大小设备上运行的
2. 所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考，这个就由我们拿到的视觉稿来定
3. 假如我们拿到的视觉稿是以 iphone6 的屏幕为基准设计的
4. iPhone6 的屏幕大小是 375px，

rem = window.innerWidth  / 10

一般我们获取到的视觉稿大部分是 iphone6 的，所以我们看到的尺寸一般是双倍大小的，在使用 rem 之前，我们一般会自觉的将标注 / 2，其实这也并无道理，但是当我们配合 rem 使用时，完全可以按照视觉稿上的尺寸来设置。

1. 设计给的稿子双倍的原因是 iphone6 这种屏幕属于高清屏，也即是设备像素比 (device pixel ratio)dpr 比较大，所以显示的像素较为清晰。
2. 一般手机的 dpr 是 1，iphone4，iphone5 这种高清屏是 2，iphone6s plus 这种高清屏是 3
3. 拿到了 dpr 之后，我们就可以在 viewport meta 头里，取消让浏览器自动缩放页面，而自己去设置 viewport 的 content
4. 设置完之后配合 rem，修改

@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}