黑马程序员技术交流社区

标题: 【南京校区】移动端布局之--REM [打印本页]

作者: 大蓝鲸小蟀锅 时间: 2019-4-15 15:30
标题: 【南京校区】移动端布局之--REM

之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。

例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。

但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。

Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。

通用换算和一些坑

有时我们会看到有些使用rem的页面里会先给页面根元素一个样式：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

为什么是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适配。

看到这里是不是觉得一切很完美？然而，这里面有两个深坑：

1.我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size: 62.5%不成立。

2.chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差（下面给demo）。

解决方案：将1rem=10px换为1rem=100px（或者其它容易换算的比例值）;不要在pc端使用rem。

那么上面的页面根元素样式要改为：

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%; }

}

至此，坑填完。设计稿px换算直接/100即可得到rem值

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2