postcss-pxtorem使用方式

移动端开发项目的时候单位为rem,一般常使用postcss-pxtorem 将px转化为rem。
[1] postcss-pxtorem 是postcss的插件，可以不用自己计算rem的值，直接按照设计稿开发，然后自动编译转换成rem;
[2] 安装
npm install postcss-pxtorem -D
[3] 配置
在webpack.config.js中配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

在vue.config.js中配置：

[4] src/libs/目录下创建一个rem.js文件，配置如下图所示
其中baseSize设置是自己定的，当设计稿为750px的时候，1rem=100px（物理像素）

[5] css的值是不变的，但是font-size的值在随着屏幕变化，这样我们只关注375*667屏幕下的css设计就好。rem = css/font-size，这个时候需要使用postcss-pxtorem，将css的px自动转化为对应的rem即可。
[6] 说到rem值就要提到逻辑像素、物理像素以及二倍屏的概念：

物理像素（px）：就是屏幕上实际的像素点，它是ui设计时以及切图时所使用的单位。

逻辑像素（pt）：根据不同的设备存在着差异（下图所示），也就是我们前端中css的像素。

#二倍屏：就是指物理像素/逻辑像素，就是一个逻辑像素单位中有多少个物理像素，一般都是二倍屏幕。
一般来说ui设计师根据物理像素设计设计稿，前端工程师根据逻辑像素（css）设计页面。
[