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

简单说一下 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;

1. 第三步： 开始进行换算。实际是不一样屏幕宽度，只要变换根元素的font-size,便可调整全部的元素宽高显示。而这个，只能经过js来实现

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


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

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

题外话

如今有不少能够直接计算rem值的插件，不用你每次宽高都去算一下，否则那样是会活不下去的。具体实现能够看这篇文章https://www.cnblogs.com/jf-67/p/7171830.html