元气满满,直接干~~~
移动端使用vw实现响应式布局时,需要自己计算vm的数值,非常难用!
什么是vw:默认将屏幕宽度分为100份,1vw = 一份。
在vuecli4中使用一个插件,让我们在开发时照常写px,而插件可以将px自动转换vw。非常好用!
1. 下载 `npm i postcss-px-to-viewport -D
`
2. 在项目根目录下创建 `.postcssrc.js
` 作为配置文件
3. 添加以下配置:
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, // UI设计稿的宽度 750/640
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw