适配概述
为什么要适配?
- 为了让我们开发的移动端项目页面,在不同尺寸大小的移动端设备(手机)中,保持相同的比例
适配原理
- 选择某个手机的尺寸大小作为基准,其他手机进行等比例缩放
- 一般选择
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]
}
}
}
}
}
复制代码