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改成您自己的设计稿宽度尺寸。
最后重新运行代码即可生效