vue快速入门（三）：vue-cli使用rem

最新推荐文章于 2022-08-11 09:55:20 发布

原创

最新推荐文章于 2022-08-11 09:55:20 发布 · 832 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue快速入门 #vue+rem #前端开发 #黑马程序员

本文介绍了在vue-cli项目中如何使用rem单位，包括直接引入rem.js配置和借助px2rem插件进行px到rem的转换。在src下创建remConfig.js，main.js中引入并配置，同时在index.css中定义样式。此外，通过npm安装px2rem-loader和lib-flexible，修改build/utils.js以启用px2rem转换。完成设置后，项目会自动将px单位转换为rem。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli 中使用rem

一、直接引入rem.js

在src文件下面定义remConfig.js 文件

  export default function() {
      var deviceWidth = document.documentElement.clientWidth;
      if(deviceWidth > 750) {
          deviceWidth = 7.5 * 50;
      }

      document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

      // 禁止双击放大
      document.documentElement.addEventListener('touchstart', function (event) {
          if (event.touches.length > 1) {
              event.preventDefault();
          }
      }, false);
      var lastTouchEnd = 0;
      document.documentElement.addEventListener('touchend', function (event) {
          var now = Date.now();
          if (now - lastTouchEnd <= 300) {
              event.preventDefault();
          }
          lastTouchEnd = now;
      }, false);
  }