vue-element-admin中实现⾃适应功能
有这样⼀个需求：在1920*1080下视图显⽰正常，但是需要在1600*900下也要显⽰正常（在vue-element-admin下）
我们直接使⽤postcss-px-to-viewport这个插件。⽹上很多说这个是vue3.0才可以使⽤，但是我这边实际情况是vue2.x版本也可以⽤。
操作步骤
1：下载插件
npm install postcss-px-to-viewport --save-dev
2：使⽤：
在package.json中加⼊如下代码：
plugins:{
// ...
'postcss-px-to-viewport':{
// options
unitToConvert:'px',//(String) 需要转换的单位，默认为"px"
viewportWidth:750,// (Number) 设计稿的视⼝宽度，⼀般是750
unitPrecision:3,//  (Number) 单位转换后保留的精度（很多时候⽆法整除）
viewportUnit:'vw',// (String) 希望使⽤的视⼝单位
selectorBlackList:['.ignore','.hairlines'],
/*(Array) 需要忽略的CSS选择器，不会转为视⼝单位，使⽤原有的px等单位
如果传⼊的值为字符串的话，只要选择器中含有传⼊值就会被匹配
例如 selectorBlackList 为 ['body'] 的话，那么 .body-class 就会被忽略
如果传⼊的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则
例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，⽽ .body 不会*/
minPixelValue:1,// (Number) 设置最⼩的转换数值，如果为1的话，只有⼤于1的值会被转换
mediaQuery:false// (Boolean) 媒体查询⾥的单位是否需要转换单位
exclude：[/^node_modules$/]// (Array or Regexp) 忽略某些⽂件夹下的⽂件或特定⽂件，例如 'node_modules' 下的⽂件//include：/\/src\/mobile\//
/*(Array or Regexp) 如果设置了include，那将只有匹配到的⽂件才会被转换，例如只转换 'src/mobile' 下的⽂件
如果值是⼀个正则表达式，将包含匹配的⽂件，否则将排除该⽂件
如果传⼊的值是⼀个数组，那么数组⾥的值必须为正则
注意：exclude和include是可以⼀起设置的，将取两者规则的交集*/
landscapeUnit:'vw'(String)横屏时使⽤的单位
landscapeWidth:750(Number)横屏时使⽤的视⼝宽度
vue element admin}
}
}
⼀般使⽤只需要加以下代码：
"postcss":{
"plugins":{
"autoprefixer":{},
"postcss-px-to-viewport":{
"viewportWidth":1920,
"minPixelValue":1
}
}
},
其中viewportWidth 我的理解是在本来的那个视⼝下是多⼤就写多⼤，⽐如我再1920下写的代码需要去兼容1600视⼝下的分辨率，就以原来的哪个视⼝为基准，填写1920

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。