移动端rem的问题
如果width以rem为单位的话，会出现如下问题：
在这个问题的基础上：http://segmentfault.com/q/1010000002442078
当width<480时，按照设定的html font-size应为10px，但是chrome最小只能是12px。如果width=320时，元素的width为30rem，想要的效果是300px，结果为360px，且超出屏幕宽度。
这种问题需要解决吗？因为chrome默认最小为12px，我就怕其他移动端的浏览器也有这种默认情况的话，怕出问题，所以请教一个，这种情况最好的解决方案是啥？
总结：这个问题其实也挺好解决的。只是自己之前没换算对。
假设320px=14px；
那
html {
font-size: 87.5%;
}
@media only screen and (min-width: 481px){
html {
font-size: 131%!important;}
}
@media only screen and (min-width: 561px){
html {
font-size: 153%!important;}
}
@media only screen and (min-width: 641px){
html {
font-size: 175%!important;}
}
这样的话，不会出现<12px的字体；屏幕比较窄时，元素的宽度也没有问题。
但是font-size=14px，以后计算比较麻烦，如果设为20px，可以方便以后计算。
html {
font-size: 20px;
}
@media only screen and (min-width: 481px){
html {
font-size: 30px!important;}
}
@media only screen and (min-width: 561px){
html {
font-size: 35px!important;}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px!important;}
}
这样才比较好一些，其实的字体计算以20px为基准，元素宽度也是。
总结，为了使浏览器中的字体大小不小于12px，给html设置的初始值大于12px就可以了。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
-webkit-transform:scale(0.8125);
css3这个用法可以
你把html的默认字体大小设成20px不就行了，通过和20px比较，计算比例。
iPhone6以下其实图标和字体大小是不需要改变的，宽度大于375px的设备可以使用媒体查询，等比放大界面，也就是重新设置html的字体大小。
当然你也可以使用js，判断屏幕大于375的时候动态计算html字体大小
html设置为100px，然后1px就是0.01rem