如何运用rem单位让网页元素自动适配屏幕尺寸

rem是什么?

rem即是根元素的大小,页面一些元素的宽度使用rem实现自适应,比如width=“2rem”,
使用@media或者js监听当页面宽度发生变化时,改变font-size的大小,实现元素大小的自适应。

    html{
		  font-size="10px"
  }
  	.ele{
			width:2rem;
			height:3rem;
}

计算公式

1、你有一个设计稿A（假定640px），有一个预设的rem和px的比例B（假如是1rem = 10px）
2、获取用户浏览器的可视区域的宽度C（假如是320px），那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知
3、原因是你假定屏幕可以容纳多少个rem，这是一个固定比例（如这里就是64rem）
1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

是用js监听页面的宽度，动态改变页面的font-siz

可在全局引入,或者引入在单页面里面。实现根据页面宽度，动态改变font-size，实现自适应。

// 设置 rem 函数
function setRem() {
    let pageWidth = window.innerWidth;    
    //为了ie也能拿到可视窗口宽度
    if (typeof pageWidth != "number") {
        //标准模式
        if (document.compatMode == "CSS1Compat") {
            pageWidth = document.documentElement.clientWidth;
            //怪异模式
        } else {
            pageWidth = document.body.clientWidth;
        }
    }
    if (pageWidth <= 768) {        
        const baseSize = 75
             // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / pageWidth
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
        // console.log("document.documentElement.style.fontSize",document.documentElement.style.fontSize);
    } else if (pageWidth > 768 && pageWidth <= 1920) {
        const baseSize = 10
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / pageWidth

        
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (10/1739)*pageWidth + 'px'
    } else {
        const baseSize = 100
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 1920
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
        // console.log("document.documentElement.style.fontSize",document.documentElement.style.fontSize);
    }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}