Vue项目,使用响应式布局插件postcss-px-to-viewport,达成自适应宽高比
摘自网友文章:https://blog.csdn.net/okboy519/article/details/104180862
1.安装插件
npm install postcss-px-to-viewport --save-dev
2.在项目根目录创建一个postcss.config.js,位置和内容如下
module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 1920,//视窗的宽度,对应的是我们设计稿的宽度 viewportHeight: 1080,//视窗的高度,对应的是我们设计稿的高度 unitPrecision: 5,//制定‘px’转换为视窗单位的小数位数(很多时候无法整除) viewportUnit: 'vw',//指定需要转换成的视窗单位,建议使用vw selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],//指定不需要转换的类, minPixelValue: 1,//小于或等于‘1px’不转换为视窗单位 mediaQuery: false//允许在媒体查询中转换为‘px’ } } }
3.启动项目查看
npm run serve