vue项目中使用rem,在入口文件添加内容

最新推荐文章于 2023-07-06 10:48:14 发布

LILEILEILOVE

最新推荐文章于 2023-07-06 10:48:14 发布

阅读量185

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LILEILEILOVE/article/details/109058404

版权

vue 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

该博客介绍了在Vue CLI项目中如何通过设置js代码实现基于rem的移动端屏幕适配。通过调整HTML字体大小，确保不同尺寸的屏幕下元素尺寸比例保持一致，简化CSS单位转换，例如将100px宽度的元素设置为5rem。

摘要由CSDN通过智能技术生成

在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:

  <script>
     window.onload = function () {
    var setRem = function () {
        // UI设计稿的宽度
        var uiWidth = 1200;

        // 移动端屏幕宽度
        var winWidth = document.documentElement.clientWidth;

        // 比率
        var rate = winWidth / uiWidth;

        // 设置html元素的字体大小
        document.documentElement.style.fontSize = rate * 20 + "px"
    };

    setRem();

    window.onresize = function () {
        setRem();
    }
}


    </script>

然后在写css就可以将px单位换成rem.
这里设置的比例是20px=1rem,
例如:宽度为100px时,可以直接写成5rem

(function (doc, win) {
    let fn = () => {
      let docEl = doc.documentElement,
        clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
    }
    if (!doc.addEventListener) return;
    win.addEventListener('resize', fn);
    doc.addEventListener('DOMContentLoaded', fn);
  })(document, window);