Vue3的移动端适配方案

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

这段时间太忙，早上有点闲空，心想着写点东西吧。一时半会想不起写啥好，回想之前开会的时候因为移动端设配的问题大家讨论的比较激烈。所以想着就写个移动端适配的方案。

我们这次选的方案是vw

• 适配思路：选择一个尺寸作为设计和开发标准；定义一套适配规则、自动适配剩余的尺寸；
• 原理：将视觉视口宽度window.innerWidth等分为100份；比如：如果视觉视口是375px,那么1vw=3.75px，设计稿有一个宽30px的元素，那只需设置为 30/3.75=8vw

当然，在vue中只需要装个依赖然后配置下即可使用

1. 首先安装 postcss-px-to-viewport-8-plugin

 cnpm i postcss-px-to-viewport-8-plugin -D

2. 然后在根目录文件夹下新建postcss.config.js文件

/*
 * @Date: 2022-04-10 09:06:21
 * @description: vw适配配置
 */
module.exports = {
    plugins: {
      'postcss-px-to-viewport-8-plugin': {
        unitToConvert: 'px', // 需要转换的单位，默认为"px"
        viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数
        propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        selectorBlackList: ['keep-px'], 
        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, //  是否直接更换属性值，而不添加备用属性
        exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        landscapeUnit: 'vw', // 横屏时使用的单位
        landscapeWidth: 1338, // 横屏时使用的视口宽度
      },
    },
  };
  

3. 然后在代码里加个元素试试，效果就出来了

文末推荐一篇很既干脆又详细的文章：移动前端开发之viewport的深入理解