viewport适配解决方案

viewport的单位vw、vh

vw、vh将viewport分成了一百份。vw即 viewport width vh即viewport height

• 1vw等于视图单位的1%的宽度
• 1vh等于视图单位的1%的高度

如果设计稿的视图为375px 那么1vw 等于 3.75px

在配置开始之前 我们依然需要一个vue-cli项目 在项目的index.html 我们需要在head标签中添加如下代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

viewport适配解决方案

要使用viewport适配 我们必须安装postcss-px-to-viewport这个包。这包名是不是有一种似曾相识的感觉。

没错,上篇文章中我们使用过postcss-pxtorem。这两个包不仅名字相似，功能也有相似的地方。postcss-pxtorem是将 px单位转换为rem单位。postcss-px-to-viewport则是将px单位转换为vw、vh

//引入 postcss-px-to-viewport
 npm install postcss-px-to-viewport --save-dev

安装完成后 我们需要进行postcss插件相关的配置 在根目录新建一个名为postcss.config.js的文件,如果项目中已包含该文件则无需新建。在文件中写入如下代码:

//postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
     unitToConvert: "px", // 要转化的单位       
     viewportWidth: 375, // UI设计稿的宽度       
     unitPrecision: 6, // 转换后的精度，即小数点位数       
     propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换     
     viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw       
     fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，       
     minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换       
     mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false      
     replace: true, // 是否转换后直接更换属性值       
     exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配       
    }
  }
}

在配置上这两个包也有相似的功能。大家可以去参考一下postcss-px-to-viewport作者的github^[4]

值得注意的是:postcss-px-to-viewport 同样存在第三方组件库兼容性的问题。比如在设计稿为750px时使用vant组件库会将vant组件的样式缩小。

解决第三方组件库兼容问题

vant组件库的设计稿是按照375px来开发的。因此在viewportWidth为750px时会出现转换问题。

// postcss.config.js
const path = require('path');

module.exports = ({ webpack }) => {
  const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: viewWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。

同理 这对于其他的移动端UI组件库同样有效果。我们只需要改动这行代码即可

const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; 

至此，我们的viewport的适配就做好了，只需要按照设计稿的比例进行开发就可以了。

作者：李知恩

https://juejin.cn/post/7061866685166256142