移动端 px与rem换算问题

Question

今天看文章的时候，看到一段代码不是很理解，所以在这里求教下给。
文章地址：
https://www.cnblogs.com/azhai...

不理解的代码段：
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

请问为什么上面的代码就可以求出根元素的font-size? 谢谢

Answer 1

• 这个是基于你的设计稿为 320 的情况，就是你按 320 来进行切图，那么就是1:1的比例。此时的font-size就是20，对不，相当于给了html的font-size一个默认值 20px。
• 那么当我们屏幕放大的时候，比如屏幕为：640，那么现在的font-size就是40了。
• 基于rem单位布局，就会自动放大，比如原先按320设计稿的宽为50，那么在640的屏幕下就乘以 640/320 这个比例。自动放大到100。达到自适应的效果。

Answer 2

看这个代码是根据屏幕宽度来求相对于320宽度的字体大小，320宽度下是20px，480宽度下是30px，640宽度下是40px

Answer 3

1.什么是rem
来自于鹅厂ISUX团队的解释如下： rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算
例如：
1
html{ font-size:16px;}
那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成rem计算上的麻烦和多位小数，所以，我们也可以进行这种方式的初始化根元素：
html{
font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号
}
这样初始化之后，我们来进行rem计算的时候，就会减少许多的麻烦。

这老哥这种操作我不是很懂,想让跟元素字体大小为10px,可以直接html{ font-size:10px;}吧?为什么要先搞成16px再乘以62.5%?

回到你说的这个式子.

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;<br>　　　　　　　window.innerWidth>max ?  window.innerWidth : max;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

320是定义的手机屏幕的最小宽度
clientWidth是document.documentElement.clientWidth,也就是当前的窗口宽度.
他提到了当屏幕宽度为640的时候,默认跟节点字体大小为20px,不过这个js设置的是40px.

(当前屏幕宽度/320)*20
我们用console来验证一下.

> window.document.documentElement.clientWidth
384
> window.document.documentElement.clientWidth/320*20
24

这个事件在页面load和resize的时候触发,就是每次窗口变化就重置根节点字体大小,相当于更改了rem的长度,来实现页面适配.
他那个写法会把字体设置的比较大,可以理解为整个屏幕的宽度就是16rem.

实际上我是写后端的..有不对的地方请指出...