适配概述

为什么要适配？

为了让我们开发的移动端项目页面，在不同尺寸大小的移动端设备（手机）中，保持相同的比例

适配原理

选择某个手机的尺寸大小作为基准，其他手机进行等比例缩放
一般选择 iPhone 6（2倍屏幕），屏幕宽度为：375px

适配方式

rem：需要手动修改 html 元素的 font-size；额外设置 body 元素的字体大小为正常值
vw： 1 vw 等于屏幕宽度的 1%

解决方案

相关包信息查看postcss-px-to-viewport 文档

安装 px 转 vw 的包：

npm i -D postcss-px-to-viewport

-   包的作用：将 `px` 转化为 `vw`，所以有了该工具，只需要在代码中写 `px` 即可
复制代码

在 craco.config.js 添加相应配置

const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
  viewportWidth: 375
})

module.exports = {
  // 此处省略 webpack 配置
  webpack: {...},

  // 这里补充style配置
  style: {
    // postcss: {
    //  plugins: [vw]
    // },
    postcss8的新写法
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins:[vw]
        }
      }
    }
  }
}
复制代码

重启项目，让配置生效

注意

如果出现适配效果没有生效,可能是版本的问题

react脚手架中的react-scripts升级到5.0版本，其内部的webpack也升级到了5.0（webpack5.0中对postcss的配置和当前的postcss-px-to-viewport的配置不兼容）

我们目前采用的第三方的工具@craco/craco来对webpack进行配置，而它并没有及时给出配套的升级方案

所以，可以选择：退回到"react-scripts": "^4.0.3", "@craco/craco": "^6.4.2",

npm uninstall react-scripts
npm install [email protected]
复制代码

或者直接按以下方法配置

        const pxToViewport = require('postcss-px-to-viewport')
    const vw = pxToViewport({
      // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
      viewportWidth: 375
    })

    module.exports = {
      // 此处省略 webpack 配置
      webpack: {...},

      // 这里补充style配置
      style: {
        // postcss: {
        //  plugins: [vw]
        // },
        //  postcss8的新写法
        postcss: {
          mode: 'extends',
          loaderOptions: {
            postcssOptions: {
              ident: 'postcss',
              plugins:[vw]
            }
          }
        }
      }
    }
复制代码

移动端适配(vw)

适配概述

解决方案

注意

猜你喜欢