移动端rem布局下,针对iPhone6 的字体是12px,如何适配更小的屏幕?

如题,设计稿针对iPhone6的字体大小设置的12px;如果用字体大小采用rem,由于浏览器限制,在320的屏幕上font-size的计算值还是12px,这种情况如何处理呢?难道要针对不同的屏幕宽度动态计算transform:scale?

阅读 5.3k
4 个回答

如果使用vw呢?

我怎么就不相信手机上最小的的 font-size 还是 12px 呢……

iphone上我记得是可以显示12px以下的啊,而安卓一般都360比较多,大部分国产机默认浏览器以及uc qq也是支持12以下的,不过chrome 从版本54开始才支持小于12px。

非要显示12px以下最更简单:比如说你本来要写1.2rem,你直接给2.4rem。然后将相应元素缩小一倍就行了,不需要检测分辨率

利用transform使用缩放,iOS的最小字体就是12px,不能在px上更小了。这是例子,可参考。DEMO 记得注意兼容性前缀。

推荐问题