响应式布局rem、rem方法封装、移动端响应式布局

2022-03-05 07:26:01

相信大家在做移动端的时候都会做各个手机的适配
这种适配就是响应式布局
在之前做网站的响应式从pc到手机用的是媒体查询

@media screen and (max-width: 300px){} 最大宽度300像素需要的样式

后面移动端业务兴起后做的响应式布局是基于手机各个型号以及各种分辨率的响应式
这个时候用的就是rem布局，也是最简单的布局
直接用rem写是不行的，这个时候就需要借助js

function fontRem() {
　　var bodyWidth = document.getElementsByTagName("body")[0].clientWidth;
　　var htmlWidth = document.getElementsByTagName(‘html‘)[0];
　　var fontSize = bodyWidth / 7.5;
　　htmlWidth.style.fontSize = fontSize + "px";
}
fontRem()

rem的原理就是根据不同的分辨率改变html上面的font-size的大小

设计稿一般都是两倍图
上面的7.5就是设计稿宽的为750像素
实际的页面尺寸都是原有尺寸 / 100
如：设计稿上面字体大小 28px = 0.28rem 其余的同理
有些情况下会出现rem失效那就需要

window.onresize = function(){
　　fontRem();
}

希望能对大家有所帮助

响应式布局rem、rem方法封装、移动端响应式布局

码农公寓

相关文章