javascript - 不同设备间 font-size 自适应？？？？？

Question

写页面的时候用一个尺寸比如宽度 414，font-size 都是 rem定义的
然后，js根据页面的宽度/414*10px。 不同尺寸的ios设备都可以实现字体缩放
android其实也可以，但是有偏差【比如会换行】貌似会大点……

Answer 1

移动端开发的页面建议是不要使用rem单位来设置字体的大小。因为通过rem方案计算出来的实际像素会有一定的偏差，而且存在小数；例如：
iphone6 屏幕的宽为375，设置的缩放比为initial-scale = 1.0，计算出 rem 的基准值为 375/10 = 37.5px； 即 1rem = 37.5px。

iphone6 plus 屏幕的宽为414，设置的缩放比为initial-scale = 1.0，计算出 rem 的基注值为 414/10 = 41.4px； 即 1rem = 41.4px。

当你要设置一个 16px 的字体的时候，换算成rem的方案在 iphone6 下就是 16/37.5 = 0.426667rem；在 iphone6 plus 下就是 16/41.4 = 0.386473rem；

浏览器解析的时候会根据你设置的基准值和设置的rem大小换算成px来显示。

所以建议不要使用rem来作为单位设置字体的大小。直接使用px来设置；但是要考虑到响应式的问题，所以需要针对不同的屏幕设置字体的大小，建议是结合使用less 或者sass来采用以下方案：

.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
    [data-dpr="2"] & {
        @{name}: @px * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        @{name}: round(@px * 2.5 / 2) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        @{name}: round(@px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        @{name}: round(@px / 2 * 3) * 1px
    }
    // for 三星note4
    [data-dpr="4"] & {
        @{name}: @px * 2px;
    }
}

.demo{
    .px2px(font-size, 14);
}

编译后输出

[data-dpr="2"] .demo{
  font-size: 28px;
}
[data-dpr="2.5"] .demo{
  font-size: 35px;
}
[data-dpr="2.75"] .demo{
  font-size: 39px;
}
[data-dpr="3"] .demo{
  font-size: 42px;
}
[data-dpr="4"] .demo{
  font-size: 56px;
}

有个不好的缺点，就是编译后会有比较多的代码。

如果觉得以上的说明还没解决你的问题可以看看 淘宝的移动端自适应方案

知识补充 http://p.io/topic/1092