标签：插件 vue 转换 vant px vw postcss 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,转换,vant,px,vw,postcss,viewport
来源： https://blog.csdn.net/weixin_41964258/article/details/121367934

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。