vue移动端/pc端适配插件:postcss-px-to-viewport

Posted coderkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue移动端/pc端适配插件:postcss-px-to-viewport相关的知识,希望对你有一定的参考价值。

问题:

vue项目做PC端或者移动端适配;
使用postcss-px-to-viewport插件,将px单位自动转换成viewport单位;


解决方法:

第一步:

安装

npm install postcss-px-to-viewport --save-dev
// 或  npm install postcss-px-to-viewport -D

第二步:

在根目录下新建postcss.config.js文件;

第三步:

postcss.config.js文件里配置以下代码;

module.exports = 
  plugins: 
    autoprefixer: , // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
    "postcss-px-to-viewport": 
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 375, // UI设计稿的宽度
      viewportHeight: 667, //视口的高度,对应的是设计稿的高度(也可以不配置)
      unitPrecision: 6, // 转换后的精度,即小数点位数
      propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
      selectorBlackList: ["ignore"], // 指定不转换为视窗单位的类名,
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    
  
;

注意:

propList: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如propList: ["*","!letter-spacing"],这表示:所有css属性的属性的单位都进行转化,除了letter-spacing


兼容ui组件库vant:

问题:

vant团队的是根据375px的设计稿去做的,理想视口宽度为375px;
而自己的设计稿750px,这样就出现比例问题;

方法:

postcss.config.js文件里配置以下代码;

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
      
    
  
 

注意:

这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统,在mac下结果为node_modules/vant,而在windows下结果为node_modules\\vant

重新运行后发现,不仅vant相关组件的单位被转换成了vw,而且其比例也就没有问题了。


以上是关于vue移动端/pc端适配插件:postcss-px-to-viewport的主要内容,如果未能解决你的问题,请参考以下文章

vue使用移动端/pc端适配插件:postcss-px-to-viewport

VUE移动端及PC端适配方案

vue3 移动端h5适配ipad ios android rem 适配(很简单,秒懂)

Vue项目配置rem移动端适配

Vue 项目中的移动端适配方案

vue 在网页打开适配移动页面大小