CSS 关于屏幕适配REM

这里不多说了，想详细了解的可以参考 2350305682 的博客 https://www.cnblogs.com/annie211/p/8118857.html

不想多深究，想先实现的看这（移动端）：

　

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
 
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

设定625%，使用的时候如果你量图为 2px像素，转换为rem 为  0.02rem即可~

关于625 怎么来的，这里稍微说一下：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
大多数浏览器的默认字号是16px，因此1rem=16px，这样不方便我们px和rem的换算，假设1rem=10px，那么100px=10rem，25px=0.25rem。这样就好换算很多，于是就有了上面的10/16。
 
如果是640的设计稿，需要除以2转化为和iphone5屏幕等宽的320。所以设计稿px单位/2/10转为rem。之后再媒体查询设置每个屏幕大小的font-size百分比，页面会根据上面设置的根font-size适配。
那么625是因为有的浏览器默认字号不是16 所以要用媒体查询进行适配~
 
so~ 估计你看不到这~