移动端适配方案，px，em，rem的区别以及关于rem的计算

px：相对长度单位，像素是相对于显示器屏幕的分辨率而言的

em：相对单位，大小不固定，继承父级元素的大小

rem：相对单位，大小不固定，相对于根元素html，浏览器默认字体是16px，那么1rem = 16px

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */  
//此时页面中1rem = 10px;
<p style={font-size: 1.2rem}>我是12px</p>

html {font-size: 20px;  }
//此时页面中1rem = 20px;1.2*20=24px
<p style={font-size: 1.2rem}>我是24px</p>

那么应该如何选择合适的像素单位呢？

只需配置少部分手机设备，对于像素对页面影响不大的情况下使用px
需要配置各种移动设备，对于像素变化比较大的，例如手机和ipad那么就使用rem

移动端适配方案

1. rem 布局
   通过postcss-pxtorem搭建项目
   移动端设计稿一般会以750px进行交付，而手机实际像素可能是375px。那么一般我们会以设备宽度的1/10作为初始html的font-size大小，当然这个值是动态的，在不同设备上得到的值不同。
   比如有的设备宽度是375px，那么html初始font-size就是37.5px，如果设备宽度是300px，那么font-size就是30px。 因为内容都是rem基于font-size的倍数，所以不同宽度的设备上都是等比显示的。
   rem具体设置方法：（为了方便计算我们一般设置1rem=100px）
   • 对于750的设计稿，375的手机和设计稿是50%的关系所以设计稿上100px，对应375手机上的50px；也就是1rem对应着50px。
     document.documentElement.style.fontSize = (a/7.5) * 1 + "px"
   • 对于375的设计稿，375设计稿和手机的100%的关系，所以设计稿上100px，对应这375手机上的100px,也就是1rem对应100px；
     document.documentElement.style.fontSize =(a/7.5) * 2 + 'px'
     在js中写：

 (function (w, d) {
        function setSize() {
            var screenWidth = d.documentElement.clientWidth;
            var currentFontSize = screenWidth * 100 / 750; // 设计稿为750px
            d.documentElement.style.fontSize = currentFontSize + 'px';
        }
        w.addEventListener('resize', setSize);
        w.addEventListener('pageShow', setSize)
        w.addEventListener('DOMContentLoaded', setSize)
    })(window, document)
</script>  

2. vw/vh 布局
   通过postcss-px-to-viewport搭建项目
3. 响应式布局（媒体查询）
4. 媒体查询+rem布局