vw的移动端适配方案

前言：
1.先来跟大家科普一个单位：vw（视宽），即当前窗口的可视宽度
2.然后再来科普另一个单位rem，这个单位是相对于html的font-size，假如说html的font-size是16px，那么1rem = 16px

大家继续看：

举个例子：我们平时手机所说的分辨率是640*1136、750 * 1334其实说的是手机的设备分辨率，但是上面所说的视宽是逻辑像素，怎么计算呢，其实很简单，设备分辨率/2就是设备的逻辑像素

• 看完以上的概念，我们来进入话题：

我们有个设备分辨率为750 * 1334，逻辑像素就是375 * 667
100vw = 375px
再继续
1vw = 3.75px
继续
1vw / X(vw) = 3.75px / 100px

问题：为什么要计算100px等价多少vw呢？问得好，方便计算，你如果另类也可以计算其他px等价多少vw

等到的X等于26.666vw 即 100px等价于26.666vw
这时候我们把html的font-size设置为26.666vw是否就可以了呢？

假设一下我们的使用场景：

---

我拿到了一个设计稿，在ps测量完发现宽度是750px，然后我们又在ps中量了某个元素宽度是100px，那么我们在写这个元素宽度的时候width: 多少rem呢？
很显然这里我们在ps中测量的元素宽度100px是设备分辨率的宽度，逻辑像素其实只有50px，所以我们需要写width: (100 / 2 / 100 )rem

---

经过这里的计算大家应该也明白了，与其我们每次计算中自己转换一次像素，不如在设置html的font-size时候就转换一次，即将html的font-size设置为（26.666/ 2）vw，这样假如我们在750宽度的设计稿中测量到的元素宽度或者高度就可以直接 除以100来获取到对应的rem了，比如：ps中打开设计稿中某一元素宽度为80px，转换为rem即为0.8rem

• 最后注意这是别忘了在你的html中设置 vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）

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

---

以上是介绍vw的适配原理，下面我们再来看一种在我的项目用到插件，不用自己去写以上的计算，但是上面的原理我建议大家好好看看，毕竟他可以很直观的帮你理解适配原理

插件postcss-flexbugs-fixes，帮助我们自动将px转换为vw的工具

1. 首先需要在你的工程中下载依赖

npm install postcss-pxtorem --save-dev

2. 首先需要在你的工程中下载依赖
   在config文件夹下,打开 webpack.config.js 文件
   找到 getStyleLoaders 中options -> plugins的添加配置代码如下

const getStyleLoaders = (cssOptions, preProcessor) => {
     
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
     
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? {
      publicPath: '../../' }
          : {
     },
      },
      {
     
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
     
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
     
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [ // 我们写插件的位置
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
     
              autoprefixer: {
     
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // 我们在此处添加如下代码
            require('postcss-px-to-viewport')({
     
              unitToConvert: 'px',
              viewportWidth: 750, // 此处我项目的设计稿宽度为750px，按照你的修改即可
              viewportHeight: 1334,
              unitPrecision: 5,
              propList: [
                '*'
              ],
              viewportUnit: 'vw',
              fontViewportUnit: 'vw',
              selectorBlackList: [],
              minPixelValue: 1,
              mediaQuery: false,
              replace: true,
              exclude: [/(\/|\\)(node_modules)(\/|\\)/]
              // exclude: [/main/, /invoice/]
            }),
            // 我们在此处添加如上代码 end
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
     
      loaders.push(
        {
     
          loader: require.resolve('resolve-url-loader'),
          options: {
     
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
     
          loader: require.resolve(preProcessor),
          options: {
     
            sourceMap: true,
          },
        }
      );
    }
    return loaders;
  };

设置完以后重启项目，然后再设计稿中量到的是多少px就直接在css中写多少px即可，会自动给你转换为vw，记得别忘了设置html的meta标签
这个转换有个坑，不支持行内样式

看完如果对你有帮助给个赞吧，支持一下作者 二嘎，谢谢！