rem解决笔记本访问网站内容被放大的问题
一般win系统的笔记本，出厂默认就是系统缩放150%，导致虽然分辨率是1920*1080，可浏览器的视口宽度却只有1200多，整个页面内容也被放大了，导致页面混乱。
mac m1笔记本也同样，分辨率不同，浏览的宽度只有1500多。 通过rem方式处理：
1. 增加meta标签，取消缩放（vue-cli 应该是改public/index.html，并且应该默认就有这个标签）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.定义设置html的font-size，定义为100px，然后按1920的设计稿来做，换算rem会比较直观，100px = 1rem
// 1920是设计稿的宽度，当大于1920时采用1920宽度，比例也是除以19.20
function setHtmlFontSize(){
deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth
document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 + 'px !important'
}3. 添加窗口变化监听事件，让窗口变化后，也可以跟着变化，避免小窗口打开后，最大化，界面不变了
//addEventListener兼容性基本还可以
window.addEventListener('resize', function () {
setHtmlFontSize()
}, false)
//但是如果ie8及以下是没有这个方法的，如果要兼容，需要判断，不存在则使用attachEvent方法注册监听
function _addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
_addHandler(window, 'resize', function() {
setHtmlFontSize())
})4. 如果每次写样式都要人为换算写rem比较麻烦，vscode中安装px2rem插件，并通过ctrl + , 然后搜索cssrem，找到基准font-size，默认是80px的基准，改成100，后续代码中，直接alt+z，会自动将文件内所有px单位转成rem
5、弊端： 一旦用了rem方式，那么，浏览器会拉的小了后，整个界面也会等比例缩放变小，导致有些元素会溢出、挤压，需要配合媒体查询来处理。 如果又不想做这么多的处理，让设计稿按1200px，居中显示，超出部分空白或固定背景，其实也可以。一般电脑的视口宽度都是超过1200的。
6.媒体查询建议数值：
@media (max-width: 576) {
//只写pc端实际可不考虑
}
@media (min-width: 576) and (max-width: 768px) {
//pad竖屏
}
@media (min-width: 768) and (max-width: 992px) {
//pad横屏
}
@media (min-width: 992) and (max-width: 1200px) {
//小屏幕的电脑
}
@media (min-width: 1200) and (max-width: 1400px) {
//一般笔记本尺寸
}
@media(min-width: 1400px) {
//正常电脑尺寸
}
//min和max都是包括数值的，但由于下面的属性会覆盖上面，所以如果下面有设置则会以下面写的为准。（或者边界值减1也行，比如< 576，577 - 768，769 - 992）
