开发者社区> 玄学酱> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

了解真实的『REM』手机屏幕适配

简介:
+关注继续查看

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果。

rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗?

首先我们来看看使用 rem 实现手机屏幕适配的常用方案。

以设计稿的宽度为640px,即:designWidth = 640,同时设定在640px屏宽下 1rem=100px ,即:rem2px = 100。

设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候,通过直接位移小数点的方式,就可以将UI图中测量到的 px 值换算成对应的 rem 值,方便快捷。

此外,在 head 中我们还设置了:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

viewport 的作用很重要,但不是本文的重点所以不展开,有兴趣的同学可以自行搜索。

先来看看具体方案:

下面四个方案来自同事共享,原理都是采用等比缩放的方式 —— 获得目标屏幕宽度和设计稿宽度的比,作为 rem 的基值(缩放系数),设置为html标签的字体大小。不同的只是在于性能取舍和书写习惯。

方案1


  1. @media screen and (min-width: 320px) {html{font-size:50px;}} 
  2. @media screen and (min-width: 360px) {html{font-size:56.25px;}} 
  3. @media screen and (min-width: 375px) {html{font-size:58.59375px;}} 
  4. @media screen and (min-width: 400px) {html{font-size:62.5px;}} 
  5. @media screen and (min-width: 414px) {html{font-size:64.6875px;}} 
  6. @media screen and (min-width: 440px) {html{font-size:68.75px;}} 
  7. @media screen and (min-width: 480px) {html{font-size:75px;}} 
  8. @media screen and (min-width: 520px) {html{font-size:81.25px;}} 
  9. @media screen and (min-width: 560px) {html{font-size:87.5px;}} 
  10. @media screen and (min-width: 600px) {html{font-size:93.75px;}} 
  11. @media screen and (min-width: 640px) {html{font-size:100px;}} 
  12. @media screen and (min-width: 680px) {html{font-size:106.25px;}} 
  13. @media screen and (min-width: 720px) {html{font-size:112.5px;}} 
  14. @media screen and (min-width: 760px) {html{font-size:118.75px;}} 
  15. @media screen and (min-width: 800px) {html{font-size:125px;}} 
  16. @media screen and (min-width: 960px) {html{font-size:150px;}}  

方案2


  1. @media screen and (min-width: 320px) {html{font-size:312.5%;}} 
  2. @media screen and (min-width: 360px) {html{font-size:351.5625%;}} 
  3. @media screen and (min-width: 375px) {html{font-size:366.211%;}} 
  4. @media screen and (min-width: 400px) {html{font-size:390.625%;}} 
  5. @media screen and (min-width: 414px) {html{font-size:404.2969%;}} 
  6. @media screen and (min-width: 440px) {html{font-size:429.6875%;}} 
  7. @media screen and (min-width: 480px) {html{font-size:468.75%;}} 
  8. @media screen and (min-width: 520px) {html{font-size:507.8125%;}} 
  9. @media screen and (min-width: 560px) {html{font-size:546.875%;}} 
  10. @media screen and (min-width: 600px) {html{font-size:585.9375%;}} 
  11. @media screen and (min-width: 640px) {html{font-size:625%;}} 
  12. @media screen and (min-width: 680px) {html{font-size:664.0625%;}} 
  13. @media screen and (min-width: 720px) {html{font-size:703.125%;}} 
  14. @media screen and (min-width: 760px) {html{font-size:742.1875%;}} 
  15. @media screen and (min-width: 800px) {html{font-size:781.25%;}} 
  16. @media screen and (min-width: 960px) {html{font-size:937.5%;}}  

方案3


  1. var designWidth = 640, rem2px = 100; 
  2. document.documentElement.style.fontSize =  
  3.   ((window.innerWidth / designWidth) * rem2px) + 'px' 

方案4


  1. var designWidth = 640, rem2px = 100; 
  2. document.documentElement.style.fontSize =  
  3.   ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%' 

为了更避免理解上的混乱,我在上面js的代码中加了 ( ) ,实际代码中是不需要的。

详细分析一下,rem 和 px 直接的转换公式可以写为:


  1. 1rem = 1 * htmlFontSize 

htmlFontSize 为 html 元素的字体大小。

首先来看方案1中,在屏宽为640px情况下的设置:


  1. @media screen and (min-width: 640px) {html{font-size:100px;}} 

可以很明显的表现出这一点 1rem = 1 * 100px ,同我们最初的设定。那么我们要得到其它屏幕大小的 htmlFontSize 值要怎么办。很简单如方案3,因为我们的采用等比缩放的方式适配,所以计算目标屏幕宽度和设计稿的宽度的比即可:


  1. window.innerWidth / designWidth * rem2px + 'px' 

由于浏览器默认字体大小为 16px,所以当我们使用百分比作为根节点 html 的字体大小时,即html元素的font-size值设置为一个百分比值,rem 的计算方式就会改为:


  1. defaultFontSize = 16px 
  2. 1rem = 1 * htmlFontSize * defaultFontSize  

如方案2中,在屏宽为640px情况下的设置:


  1. @media screen and (min-width: 640px) {html{font-size:625%;}} 

应用上面的公式:


  1. 1rem = 1 * 625% * 16px  

其中:625% * 16 = 6.25 * 16 = 100

所以:1rem = 1 * 100px

同样的可以得到所有屏幕大小下,html 的 font-size 值的计算公式,即为方案4:


  1. window.innerWidth / designWidth * rem2px / 16 * 100 + '%' 

通过方案3和方案4的公式,就可以很方便的生成方案1和方案2中的css。

这里只给出了方案3和方案4对应验证页面(方案1和方案2是它们的变形): scheme3.html(http://htmlpreview.github.io/?https://github.com/hbxeagle/rem/blob/master/scheme3.html), scheme4.html(http://htmlpreview.github.io/?https://github.com/hbxeagle/rem/blob/master/scheme4.html)

如下面两张图,是在屏宽为360px下的效果,通过计算目标为:1rem = 56.25px。方案3设置值为:56.25px,方案4设置值为:351.5625% 

到目前为止貌似很完美的解决了问题,实际情况当然是出现了意外。在有些 Android 手机上,浏览器或 webview 的默认字体是随着系统设置的字体改变的。这样就会导致默认字体大于或小于 16px。

修改默认字体大小后,我们再看方案3和方案4。

同样在屏宽为360px下,我们调大系统字体大小,如下面的效果

设置前 html 元素的字体大小的计算值为 18px ,设置后的计算值为 65px ,由于屏幕宽度没有改变,我们的目标值,即我们在 html 元素上设置的 font-size 值也没有变化任然为 56.25px,而最终计算值出现了偏差。 

分析偏差前,先来看在360px屏宽下,方案3和方案4的计算过程:

方案3:


  1. document.documentElement.style.fontSize = 56.25px 
  2. htmlFontSize = 56.25px 
  3. 1rem = 1 * htmlFontSize = 56.25px  

实际为:

1rem = 64.6875px

方案4:


  1. document.documentElement.style.fontSize = 351.5625% 
  2. htmlFontSize = 351.5625% 
  3. defaultFontSize = 18px 
  4. 1rem = 1 * htmlFontSize * defaultFontSize = 351.5625% * 18px = 63.28125px 
  5. 351.5625% * 18 = 63.28125 

实际为:

1rem = 64.6875px

貌似方案4的计算结果很接近实际效果,而方案3偏差很大。再来比较方案3和方案4的计算公式:


  1. // 方案3 
  2. document.documentElement.style.fontSize =  
  3.   window.innerWidth / designWidth * rem2px + 'px'
  4.   
  5. // 方案4 
  6. document.documentElement.style.fontSize =  
  7.   window.innerWidth / designWidth * rem2px / 16 * 100 + '%' 

方案4较于方案3其实多除了一个16,可以推测浏览器在计算 rem 的具体值时,如果 html 设置的 font-size 为 px 值时会先除以 16 ,然后再乘以 htmlFontSize。


  1. 1rem = 1 * (56.25px / 16) * 18 
  2. 1 * (56.25 / 16) * 18 = 63.28125  

方案4存在问题,是因为系统的默认字体改为了 18px ,但是我们在计算百分比是时候,还是以 16px 为基准值进行计算,所以出现偏差(计算值和实际值之间还有一点偏差这个在后面会提到)。

而在方案3中,我们其实是不考虑浏览器默认字体大小的,但在实际使用的过程中,浏览器还是除了 16 ,而此时默认字体大小为 18px。得出如下在 html 的 fontSize 设置为 px 的情况下 rem 的计算公式为:


  1. 1rem = 1 * (htmlFontSize / 16) * defaultFontSize 

在系统设置的字体大小发生改变时,defaultFontSize 会跟着改变,而 16 不会变化。所以方案3虽然表面上不考虑默认字体大小的变化,只关注屏幕与设计稿之间的宽度比,但在实际计算中还是使用到了默认字体大小,而且还有一个不变的 16 在作祟,导致方案3失败。

所谓的「root element」其实不是想象的那样,一个是16,一个是18,到底取的是那个 root element 的字体大小。

ok,rem 的计算的时候,px 的方式会有一个16不随系统字体大小改变,所以我们采用百分比的方案,绕开这个问题。

采用百分比的方案4因为在计算时写死了默认字体大小 16px。所以它的偏差在于没能动态的获取默认字体大小。更新如下:

方案4.1


  1. var designWidth = 640, rem2px = 100; 
  2. var h = document.getElementsByTagName('html')[0]; 
  3. var htmlFontSize = parseFloat(window.getComputedStyle(h, null
  4.                                     .getPropertyValue('font-size')); 
  5.   
  6. document.documentElement.style.fontSize =  
  7.   window.innerWidth / designWidth * rem2px / htmlFontSize * 100 + '%' 

效果如下图:

16px 的图中,设置后的 html 的 font-size 与 1rem 的实际值有偏差,同时 6.4rem 的计算值也有偏差。通过查看代码发现html的font-size使用的是: getPropertyValue('font-size') 而 1rem 使用的是getPropertyValue('width'),偏差出在计算 font-size 的时候浏览器进行了四舍五入。rem 定义中的另一个元素「font size」也不能按字面意思使用,宣告失守。

18px 中的偏差,以及上文中方案4在 18px 实际值和计算值出现的偏差都是同样的问题。所以基准值还需要修改。

在更新一版,方案4.2:


  1. var designWidth = 640, rem2px = 100; 
  2. var d = window.document.createElement('div'); 
  3. d.style.width = '1rem'
  4. d.style.display = "none"
  5. var head = window.document.getElementsByTagName('head')[0]; 
  6. head.appendChild(d); 
  7. var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width')); 
  8. d.remove(); 
  9. document.documentElement.style.fontSize =  
  10.   window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%' 

效果如下图:

到此为止,rem 在默认字体不是 16px 的情况下的处理已经解决,考虑到还有设计屏幕旋转,最终手机端的解决方案为:


  1. function adapt(designWidth, rem2px){ 
  2.   var d = window.document.createElement('div'); 
  3.   d.style.width = '1rem'
  4.   d.style.display = "none"
  5.   var head = window.document.getElementsByTagName('head')[0]; 
  6.   head.appendChild(d); 
  7.   var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width')); 
  8.   d.remove(); 
  9.   document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%'
  10.   var st = document.createElement('style'); 
  11.   var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  12.   var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}" 
  13.   st.innerHTML = portrait + landscape; 
  14.   head.appendChild(st); 
  15.   return defaultFontSize 
  16. }; 
  17. var defaultFontSize = adapt(640, 100);  

回过头来再看 rem 的定义,『The font size of the root element.』。我们以为的 root element —— html 其实还有个影子在作祟,而我们以为的 font-size 其实是个近似值。




本文作者:佚名
来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
bilibili 移动端vw / vh 手段制作案例
bilibili 移动端vw / vh 手段制作案例
0 0
Andoid屏幕适配终极手段(小编用过最得劲的dp适配)
Andoid屏幕适配终极手段(小编用过最得劲的dp适配),1.工具类解析values目录下的dimens文件,根据其中所有的dimen标签,name和values,生成其他各种dp对应的dimens文件 2.
1032 0
移动端自适应布局的最好工具-rem
提到rem,大家首先会想到的是em/px/pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦 先看看兼容性,关于移动端: ios:6.
5673 0
移动端自适应rem布局
补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码:       initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。
916 0
淘宝手机rem的如何使用
1.主要介绍几个移动端常用的单位rem、vw、vh,配合传统的px、百分比、标签,兼容适配移动端的各种分辨率的手机端。     rm : 这个单位是以父元素为标准来进行计算 , 例如:父元素  font-size:16px;     子元素 : font-size:0.875em ; 则子元素  font-size: 0.875*16    rem : 而这个单位是以 root 根元素标准来计算的。
637 0
移动手机专题rem布局实践+主要代码
HTML开头部分 //移动必加样式 主要代码为CSS部分 html { font-size: 62.5%;} // body {font-size: 1.2rem; width: 32rem;} //定义body大小,body为居中内容部分因为设计图是640...
725 0
移动端rem自适应布局关键代码
function resi() { var html = document.querySelector("html"); var wW = document.body.clientWidth || document.
465 0
Android平台根据分辨率计算屏幕尺寸,基于物理尺寸来验证手机和平板应用合并的可行性
 Android平台根据分辨率计算屏幕尺寸,基于物理尺寸来验证手机和平板应用合并的可行性   出发点:Android系统本身是支持多种分辨率的,如图1所示,一般情况下要适配不同尺寸的设备只需要做两件事,1. 根据4种不同的屏幕尺寸提供4套UI布局(layout)。
852 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载