配置H5移动端视口单位插件

配置视口单位插件

目标：通过 webpack 插件将 px 单位自动转换成视口长度单位 vw/vh，实现页面对不同屏幕的自动适配

分析说明：

适配概述

• 为什么要适配？

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

• 适配原理

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

• 适配方式

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

操作步骤

1. 安装 postcss-px-to-viewport

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

npm i postcss-px-to-viewport -D

2. 在 craco.config.js 添加相应配置(没有自行创建)

+const pxToViewport = require('postcss-px-to-viewport')
+const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
+  viewportWidth: 375
+})
​
module.exports = {
  // 此处省略 webpack 配置
  webpack: {},
​
+  style: {
+    postcss: {
+      mode: "extends",
+      loaderOptions:{
+        postcssOptions: {
+          ident:"postcss",
+          plugins: [vw]
+        }
+      }
+    }
+  }
}

3. 在 src\assets\styles\index.scss 添加测试类名

+.testBox {
+  width: 100px;
+  height: 100px;
+  background-color: pink;
+}
​

4. 在 src\App.tsx 使用测试类名

import { Button } from 'antd-mobile'
import imageNone from '@/assets/none.png'
export default function App() {
  return (
    <div>
      <h1>极客园根组件</h1>
      <Button color="primary">按钮</Button>
      <img src={imageNone} alt="" />
+      <div className="testBox">盒子</div>
    </div>
  )
}
​

5. 💥重启脚手架💥