本文主要是介绍根据设计稿尺寸，样式自适应各个分辨率（vue）插件：postcss-px-to-viewport，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

插件：postcss-px-to-viewporthttps://www.npmjs.com/package/postcss-px-to-viewport

简介

将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。

PC、移动端都可使用

用法如下：

一：安装

npm install postcss-px-to-viewport --save-dev

二：在vue的根目录下新建postcss.config.js，引入如下代码：

module.exports = {
  plugins: {
     autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
}

完成之后，项目中的px 就会自动变为vw。

注意：

由于移动端用的UI 框架为vant ，但是vant 设计的宽度为375 ，设计稿的宽度为750，这样用的话，会导致vant 的所有尺寸都会变小一倍。当然我们也可以把上面viewportWidth改为375，然后把UI 图除以2，然后计算。
当然，我们也可以根据不同的文件来适配不同的尺寸，vant 的适配375，自己写的适配750。
代码如下： 

const path = require('path');
 
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
 
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

三、如果有的样式不想被转换，可以用PX，例

.item {
  width: 300PX;
}

这篇关于根据设计稿尺寸，样式自适应各个分辨率（vue）插件：postcss-px-to-viewport的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！