vue项目中使用rem替换px的实现示例

下面我来详细讲解一下在Vue项目中使用rem替换px的具体实现攻略。

什么是rem

如果你对rem的概念还比较陌生，那么简单来说，rem就是相对于根节点(html或body)设置的字体大小。也就是说，我们设置元素的长度、宽度、边框等样式属性时，直接使用rem就能够根据根节点设置的字体大小来进行自适应，达到了适配不同屏幕尺寸的效果。

实现步骤

接下来，我会详细介绍如何在Vue项目中使用rem替换px。

第一步：设置根节点字体大小

我们先在项目中通过样式表设置根节点html的字体大小，一般默认为16px：

html {
  font-size: 16px;
}

第二步：将px转换成rem

接下来，我们需要将项目中的px单位换成rem单位。为了让这个过程更加方便，我们可以使用postcss-pxtorem插件来实现自动转换。

具体步骤如下：

1. 通过npm安装postcss-pxtorem插件：

npm install postcss-pxtorem --save-dev

1. 在项目根目录下创建postcss.config.js文件，并添加如下内容：

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 16, // 根节点字体大小
      propList: ['*'] // 要转换的属性
    }
  }
};

1. 在项目中使用px单位的时候，直接按照设计图的标注使用即可，插件会自动将其转换为rem单位。

以上就是使用postcss-pxtorem插件实现将px转换为rem的具体步骤。

示例一：在vue-cli项目中使用rem

让我们来看一下具体的实现步骤。假设我们的Vue项目是通过vue-cli创建的。

1. 安装postcss-pxtorem插件：

npm install postcss-pxtorem --save-dev

1. 修改项目根目录下的postcss.config.js文件，如下：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      exclude: /node_modules|folder_name/i   // 排除其它文件夹下的样式文件
    }
  }
};

需要注意的是，这里的rootValue需要根据实际情况来设置，一般都是以设计图宽度为标准来进行设置的，比如750px设计图对应的rootValue值就为750/20=37.5。而exclude属性可以用来排除不需要转换的文件夹。

1. 在项目的.postcssrc.js配置文件中引入postcss配置：

module.exports = {
  "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 37.5,
      "propList": [
        "*"
      ],
      "exclude": /node_modules|folder_name/i
    }
  }
}

1. 在Vue中使用rem

在Vue组件的样式表中使用rem单位即可，例如：

.box {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}

通过这种方式，我们就可以在Vue项目中使用rem单位进行自适应布局了。

示例二：手动封装rem适配方案

除了使用插件自动转换px为rem之外，我们也可以手动封装一些JavaScript代码来实现rem适配方案。

具体示例代码如下：

(function() {
  // 根据设备dpr动态设置缩放比例
  var scale = 1 / window.devicePixelRatio;

  // 设置viewport
  document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

  // 根据屏幕宽度动态计算rem基准值
  function calcRem() {
    var docEl = document.documentElement;
    var width = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
    docEl.style.fontSize = width / 10 + 'px';
  }

  calcRem();

  // 监听窗口大小变化，重新计算rem基准值
  window.addEventListener('resize', function() {
    calcRem();
  });
})();

以上代码实现的功能是：

1. 根据设备dpr动态设置缩放比例；
2. 设置viewport；
3. 根据屏幕宽度动态计算rem基准值；
4. 监听窗口大小变化，重新计算rem基准值。

最后，我们只需要在Vue组件的样式表中直接使用rem单位即可，例如：

.box {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}

通过这种方式，我们同样可以在Vue项目中使用rem单位进行自适应布局了。