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~ 估计你看不到这~
上一篇:MYSQL 常用函数(数学、字符串、日期时间、系统信息、加密)


下一篇:[Voice communications] 让音乐响起来