什么是vw(Viewport Width)和vh（Viewport Height）？
vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位。
系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。
vw、vh和百分比不同的是，百分比永远都是以父元素为参考，而vw、vh是以视口作为参考。
结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。
我个人在做Vue项目的时候，一边想用vw、vh进行布局，一边又觉得px布局方便，因为蓝湖上边的切图是直接有视图的px大小。
所以就想如果有一个方案可以解决px转换为vw vh就太好不过了，我这边是直接在.postcssrc.js里边进行配置，下边是我的代码，大家可以参考一下，有问题请指出问题
1. npm i postcss-px-to-viewport -D
2. 在项目根目录下添加.postcssrc.js文件
3. 添加如下配置：
1 const path = require('path');
2
3 module.exports = ({ file }) => {
4 const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
5
6 return {
7 plugins: {
8 autoprefixer: {},
9 "postcss-px-to-viewport": {
10 unitToConvert: "px", // 要转化的单位
11 viewportWidth: designWidth, // UI设计稿的宽度
12 unitPrecision: 6, // 转换后的精度，即小数点位数
13 propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
14 viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
15 fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
16 selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
17 minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
18 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
19 replace: true, // 是否转换后直接更换属性值
20 exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
21 landscape: false // 是否处理横屏情况
22 }
23 }
24 }
25
26 }
添加完配置之后需要重新运行
这个方案可以在我的Vue项目中直接把px单位转换为vw、vh
标签：转换,vh,px,单位,视口,vw 来源： https://www.cnblogs.com/ljyn/p/15229148.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。