写页面的时候用一个尺寸比如宽度 414,font-size 都是 rem定义的
然后,js根据页面的宽度/414*10px。 不同尺寸的ios设备都可以实现字体缩放
android其实也可以,但是有偏差【比如会换行】貌似会大点……
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
移动端开发的页面建议是不要使用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;
}
有个不好的缺点,就是编译后会有比较多的代码。
如果觉得以上的说明还没解决你的问题可以看看 淘宝的移动端自适应方案