备战面试！一篇帖子学会移动端适配

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

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

适配方式

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

2、 vw 等于屏幕宽度的 1%

3、em父元素的的字体大小，会往上找

开始配置

1、安装 px 转 vw 的包：npm i -D postcss-px-to-viewport。包的作用：将 px 转化为 vw，所以有了该工具，只需要在代码中写 px 即可

2、在 craco.config.js 添加相应配置(因为我们前面配置了@路径别名，下载了@craco/craco这个包)

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]
     }
    }
  }
 }
}

3、重启项目，让配置生效。我们在写样式px时，会默认帮我们转换成vw单位

注意版本兼容性问题

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

我们目前采用的第三方的工具@craco/craco来对webpack进行配置，而它并没有及时给出配套的升级方案。目前[官方仍然没有解决] (github.com/gsoft-inc/c…

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

npm uninstall react-scripts
npm install react-scripts@4.0.3