rem布局的字体问题

Question

使用rem布局时候，字体不推荐使用rem，要使用如下：

[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

但是iphone6，iphone5，iphone4的dpr都是2，但是其屏幕尺寸确不同，若容器安装750设计稿的rem布局，字体在iphone5时会超过容器大小，请问这个问题各位是如何解决的？

Answer 1

字体也用rem没问题的

Answer 2

对于一般文字尺寸，使用css媒体查询可以解决
为什么不能使用rem

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px;}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px;}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px;}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px;}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px;}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px;}}
@media screen and (min-width:800px){html{font-size:25px;}}

对于标题类文字可以直接使用rem

Answer 3

deviceWidth

Answer 4

直接rem设置字体啊，完全没毛病的。

Answer 5

楼主那就根据设置设备的实际像素值来设定对应的字体大小