[JavaScript知识库]记录vue使用rem实现页面动态响应

rem适配介绍

前言
根据 W3C 规范中对 1rem 的定义：

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。
这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）

兼容性
ios：6.1系统以上都支持

android：2.1系统以上都支持

大部分主流浏览器都支持，可以安心的往下看了

rem：（font size of the root element）

意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的根元素（html）来设置字体大小的，举一个简单的例子，

现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px。

举个例子：

	//假设我给根元素的大小设置为16px
	html{
		 font-size：16px
	}
	//那么我底下的p标签如果想要也是16像素
	p{
		 font-size:1rem
	}
	//如此即可

实际操作

1. 创建rem.js

// rem等比适配配置文件
// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变浏览器窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

2.在main.js引入rem.js

import './libs/rem.js'

3.页面使用

页面布局尽量是用百分比，其他所有配置尽量是rem，尤其是字体大小

<div id="div1">我是一个div标签</div>

#div1{    
 // width:100%;
  font-size: 1rem;  
  width: 16rem;   
  height: 2rem; 
  background-color: lawngreen;
}

这样当页面改变时div里面的文字也会跟着变。

参考文章：
https://blog.csdn.net/weixin_39908106/article/details/111677748
https://blog.csdn.net/weixin_39993989/article/details/111655490