使用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.innerWidt