移动端rem布局

关于 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