首先，我们直接进入正题吧，目前Rem主要是移动端适配的一种方案，
所谓的Rem其实是 <Root em>（相对根元素字体大小的 em 单位）。
都知道 <em> 单位是根据当前父元素中的字体大小来自身大小的单位，
举个例子，比如说当前父元素的字体大小是16px 那么<1 em>大小就是 16px
那我们设置了父元素的字体大小为 12px呢？ 没错，那当前元素内 <1 em>
就是 12px 。
现在回到我们的 <Rem> ，这个单位是根据网页根元素<html></html>来定
义自身大小的，但同时不管在什么大小的屏幕下，根元素字体的大小都是 16px ，
那要怎么做到随着屏幕的大小来，适配呢？这个时候我们需要先获取当前设备的
屏幕宽度，然后根据屏幕宽度动态的设置<html></html>的字体大小，这样子网页
根元素的字体大小永远都是根据屏幕的宽度来定义的，其实只是做了一层转换而
已，( <Rem> → 根元素字体大小 → 屏幕宽度 ) 就是一层向上依赖的关系，只
要做到了根据屏幕宽度来设置根元素字体大小就可以说是完成了Rem单位的适配了。
举个例子：假设现在屏幕宽度是750px 我们设置的根元素字体大小是 10（自定义值）
/750（屏幕宽度），（即75px）那么现在 <1Rem> 就是 75px，那么设计稿上一个元素
宽100px，那要怎么换算成 Rem 呢？很简单！（才怪- -，我也一脸懵逼）大概就是
75/100 得到的结果就是 <Rem> 啦（大概吧 · - · 有大佬解惑吗？），那75是哪里来
的呢？？？这个75就是根元素字体大小，是通过 10（自定义值）/750（屏幕宽度）
换算出来的，所以应该是设计稿元素大小除以根元素字体大小，算出来的就是 <Rem>
了 （吧。。）
04-05
1769
1769
01-05
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
