前端界面的rem适配换算

https://www.cnblogs.com/liangxuru/p/6970629.html

为什么要使用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适配布局、Bootstrap前端开发框架
欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端. 致力于尽可能详细且简洁的介绍前端知识.自己的捷径,也是学习路上的记录.欢迎探讨目录一.L ...
使用Flexible.js实现手机端网页内容适配(rem适配法)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
18. 【移动Web开发之rem适配布局】
文章目录 [移动Web开发之rem适配布局]前端小抄(18) 一.rem单位 1.1 rem 单位二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2 ...
「学习笔记」移动Web开发之rem适配布局10
「学习笔记」移动Web开发之rem适配布局10 一.rem单位 1.1 rem 单位二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2.2.2 关键 ...
移动端最强适配（rem适配之px2rem）移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
采集页面之后css布局混乱之rem适配布局
1.rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素( html)设置fo ...

前端界面的rem适配换算

前端界面的rem适配换算相关推荐

最新文章

热门文章