前端适配不同显示器——rem方案

rem 原理：html 标签有 font-size 属性，默认 font-size = 16px，即 1rem = 16px

rem 方案使用：

找到 index.html 文件，添加以下两行代码：

拓展：如果您是 vue 脚手架搭建项目，直接找到 public 问价夹下 index.html 文件中进行添加即可

1.在head标签中插入以下代码

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

拓展：（拓展内容仅了解，代码紧急可不看）

1.1 width=device-width 把布局视口设置成为屏幕的宽度。
1.2 initial-scale=1 的意思是初始缩放的比例是1，使用这个标签，缩放比例为 “1” 
1.3 viewport是网页默认的宽度和高度

2.在 html 标签中最后（也就是html结束标签之前）插入以下代码

<script>
    document.documentElement.style.fontSize = 
    document.documentElement.clientWidth / 1920 + 'px';
</script>

如果您的设计稿宽度是 1920px 您就直接复制以上代码，如果是别的，需要将1920改成您自己的设计稿宽度尺寸。

最后重新运行代码即可生效