这段时间工作涉及到了移动端页面，用到了rem单位，做个记录。

什么是rem?

rem是相对长度单位。相对于根元素（html元素）font-size计算值的倍数的一个css单位，也就是我们前端常说的适配单位rem。因为rem的特性，常被用来做移动端适配，pc端页面不推荐使用rem。

rem的移动适配原理

举个例子：

设计稿宽度：600px

移动设备：600px

设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，那么 1rem = 100px

设置一个盒子的宽度: width=1rem（即100px），此时这个盒子屏占比为：1/6。

当相同的代码运行在屏幕为300px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 50px，渲染出来的盒子就是1rem = 50px,这个盒子屏占比同样为：1/6。以此达到移动适配的效果

可以看出适配的的关键就在于js设置html的font-size: font-size= 移动设备 / 设计稿宽度 * 100。那么这个公式怎么来的呢？

首先 移动设备 / 设计稿宽度 是渲染效果相对于设计稿的缩放比

然后 移动设备 / 设计稿宽度 * 100 乘以100是为了把font-size(=rem)放大100倍，因为当font-size小于浏览器支持最小字体大小的时候，浏览器会把fon-size默认为最小字体大小。也可以乘以其他值如50，但是为了好计算，一般设置为10或100，这样，我们只需要把设计稿宽度如 width=50px，除以10或100，改为5rem或0.5rem就好了。

rem的使用

1、设置移动端html的font-size大小

由于本人以wordpress网站为主，所以使用自带的函数首先判断是否为移动端，如果是，设置初识font-size大小

<?php if (wp_is_mobile()) { ?>
    <style>
        html {
            font-size: 50px;
        }
    </style>
<?php } ?>

2、利用javascript在页面收缩时动态改变font-size大小进而影响元素的大小

    function setFontSize() {
        var screenWidth = window.innerWidth || document.documentElement.clientWidth;
        var baseScreenWidth = 375; 
        var baseFontSize = 50; 
        var fontSize = baseFontSize * (screenWidth / baseScreenWidth);
        document.body.style.fontSize = fontSize + "px";
        document.documentElement.style.fontSize = fontSize + "px";
    }
    window.onload = setFontSize;
    window.onresize = setFontSize;