关于 px rem em
rem布局思路
公式
根据手机屏幕的大小，设计的元素的大小随着手机大小进行改变，采用rem布局 只要改变不同手机的根元素大小就可以改变所设计元素的大小
利用 js 改变不同手机的根元素大小
(function(doc,win){
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
//js获取当前设备得大小；document.documentElement.clientWidth;
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(clientWidth >=750){//宽度》750 平板或者电脑桌面
docEl.style.fontSize = '100px' //设置根元素为固定为100px
}else{
//设置移动端适配
//设置html根元素大小 100设计稿得html大小 750设计稿（根据设计稿变化）
//测试设计稿大小：测量得值px px转rem 测量得px/100=？rem 直接css里面写？rem
//假设设计稿的字体大小为100px 所用的设备宽度为750px
docEl.style.fontSize = 100 *(clientWidth/750)+'px';
}
}
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
如果想要采用rem布局只要引入这个js文件就可以了
在html设置一个盒子为2rem
本文地址：https://blog.csdn.net/weixin_50736511/article/details/110247719
