rem适配简单理解

.box{
height:200px;
width:200px;
background:red;
}

//适配,同一个元素在不同屏幕上呈现同种效果
200/375=200/414;

rem适配:html根元素的大小设置为屏幕区域的宽
整个屏幕设置为1rem


js代码实现

 //获取屏幕宽度
    var width=document.documentElement.clientWidth;
 获取HTML
    var htmlNode=document.querySelector('html');
 //设置字体大小
    htmlNode.style.fontSize=width+'px';

//占满屏的box盒子
.box{
    height:1rem;
    width:1rem;
    background:red;
}
发布了21 篇原创文章 · 获赞 0 · 访问量 313

猜你喜欢

转载自blog.csdn.net/weixin_46337813/article/details/104662275