移动端：UI图px单位转换rem单位的计算方法

Posted 2020-10-17 斗破苍穹-毅力

简单说一下 em

em 单位是相对于父元素字体大小来去定的。比方说：

    font-size:12px;
    元素宽度是2em;
    那么实际的宽度是 24px.(具体为什么，可以去查询资料，今天主讲rem)

简单说一下 rem

rem 是相对于根元素（html）字体大小来确定的。比方说：

            宽度            字体
    手机A： 320px            14px

    手机B： 460px             ?
    为了能达到可以同等比的放大缩小，那么，可以进行很简单的运算：?=14*460/320
    得到：？=20.125px; 

UI图上的px转化成实际操作的rem计算方法

1. 第一步：设计标签的基准值，随意，想定多少定多少。随意定：20px
2. 第二步：看看UI同事给你的图，宽度是多少？一般UI给图都是会给大一点，因为大图切下来，当屏幕小点，不会失真，但是小图要是放大了，就不太好看了。。。比方说，

    一张图 宽度749px 高度234px;  你的浏览器模拟器以iphone6来定基，也就是宽度为375px;
    那么根据等比例缩放，你的模拟器高度为h=375*234/749=117.1562px
    那么实际的rem的计算值为：
    宽度：375/20 = 18.75rem
    高度: 117.1562/20 = 5.8578rem;

3. 第三步： 开始进行换算。实际是不同屏幕宽度，只要变换根元素的font-size,即可调整所有的元素宽高显示。而这个，只能通过js来实现

                基准屏幕               真实屏幕
    宽度          375px               clientWidth
            
    字体          20px                ?


    js代码：
    window.onload = function(){
        document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + \'px\'
    }

4. 第四步：检验你的页面。

题外话

现在有很多可以直接计算rem值的插件，不用你每次宽高都去算一下，不然那样是会活不下去的。具体实现可以看这篇文章https://www.cnblogs.com/jf-67/p/7171830.html