前端页面适配的rem换算
2017-08-29 13:44
288 查看
为什么要使用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值。
相关文章推荐
- 前端页面适配的rem换算
- 前端页面的适配使用rem换算
- 前端页面适配的rem换算
- 移动端页面适配的rem换算
- 移动端页面使用rem来做适配
- rem、px、em(手机端h5页面屏幕适配的几种方法)
- 关于rem的网页适配以及JS实现页面滑动(jquery)
- 动态rem解决移动前端适配
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- Flexible实现H5页面的rem布局适配
- 了解前端手机屏幕适配【REM 】真实原理
- rem - 移动前端自适应适配布局解决方案和比较(转载)
- 基于rem去计算适配各种页面
- 移动端页面适配rem和vw的使用和转换
- html移动端页面适配js(采用rem+百分比形式)
- Flexible实现手淘H5页面的rem布局适配
- iPhone X Web前端页面适配(处理可爱的刘海)
- 大前端学习笔记整理【五】rem与px换算的计算方式
- 移动端页面开发适配 rem布局原理