React--移动端适配

• 适配原理

  • 选择某个手机的尺寸大小作为基准，其他手机进行等比例缩放

  • 一般选择 iPhone 6（2 倍屏幕），屏幕宽度为：375px

• 适配方式

• rem：需要手动修改 html 元素的 font-size；额外设置 body 元素的字体大小为正常值

• vw： 1 vw 等于屏幕宽度的 1%

 

// rem 适配
// iphone6       html ==> font-size: 37.5px
// iphone6 plus  html ==> font-size: 41.4px
// 
// iPhone 6 下宽高为 100px：
// 100 / 37.5 ≈ 2.667
// height: 2.667rem; width: 2.667rem;

// vw 适配
// iPhone 6 下宽高为 100px：
// 100 / (375 / 100) = 100 / 3.75 ≈ 26.7vw
// height: 26.667vw; width: 26.667vw;

 

步骤：

• postcss-px-to-viewport 文档

1. 安装 px 转 vw 的包：yarn add -D postcss-px-to-viewport

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

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

3. 重启项目，让配置生效

 

/craco.config.js 中：

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

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

  style: {
    postcss: {
      plugins: [vw]
    }
  }
}