如何根据屏幕大小，用rem做响应式布局

扶苏2581

已于 2022-09-02 13:46:51 修改

阅读量1.3k

点赞数

文章标签： js html css

于 2020-07-19 09:40:21 首次发布

本文链接：https://blog.csdn.net/weixin_44165899/article/details/107440692

版权

在我们学习前端的初期，经常会遇到不知道如何设置rem的问题。但如何没有设置好rem就会造成页面混乱的情况发生。我在编码过程中就遇到类似的问题。所以写下这篇文章以共大家参考。
首先我们要知道自己设计图纸的大小，例如我项目中的图纸宽度是720px的宽度。然后我们设置一个基本fontSize的大小比如100px。然后我们需要一个函数监听页面尺寸变化，通过动态改变fontSize的大小来实现rem的等比例缩放。fontSize=htmlWidth*100/设计尺寸。

    //获取屏幕宽度
    let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
    //获取dom
    let htmlDom =document.getElementsByTagName('html')[0];
    //设置rem基准值
    htmlDom.style.fontSize=100+'px';
    //监听屏幕变化 从而改变1rem的值
    window.addElementlListener('resize',(e)=>{
		let htmlWidth =document.documentElement.clientWidth||document.body.clientWidth;
	    htmlDom.style.fontSize=htmlWidth*100/设计尺寸+'px';
	})