前言
因为工作原因,一直在写后台管理系统,关于h5页面的一些适配了解的不多。这段时间刚好有空,就花时间去了解了一下h5的最近的适配方案。因为之前使用postcss-to-px2rem
进行适配的,但是也有很久没有做过了,所以现在也学学其他的。
1,通过react脚手架创建一个react项目
npx create-react-app +项目名
- 因为我的node版本是18.2.0的,所以react版本下载下来就变为18.2.0的版本了
- 项目运行版本react 18.2.0
2,运行
npm run start
3,适配移动端方案 viewport
- 1, 安装插件
# 1.npm方式:
npm install postcss-loader postcss-px-to-viewport --save-dev
# 2.yarn安装:
yarn add -D postcss-loader postcss-px-to-viewport
- 2,准备暴露webpack.config.js之前,需要将代码进行保存,不然项目报错。
git add .
git commit -m "factory: 准备暴露webpack.config.js"
- 3,准备将 webpack.config.js 通过命令行暴露出来,此步骤不可逆,如果感觉自己的webpack暴露出现问题或者想回到之前的代码,可以使用git命令进行回滚,具体操作如下。
git log --oneline # 查看提交记录,然后复制头部的header,如下图
git reset --hard `版本号` #回到之前版本
![url](https://i-blog.csdnimg.cn/blog_migrate/9319a71316b78a5d847e628187e93d49.jpeg)
- 4 暴露命令:
npm run eject
- 可能是因为react版本的不同,当进行完
npm run eject
这一步之后有一个报错,出现了报错信息:
Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env
- 我的解决方案是eslintConfig 中加上 parserOptions 这段代码
- 可能是因为react版本的不同,当进行完
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"parserOptions": {
"babelOptions": {
"presets": [
["babel-preset-react-app", false],
"babel-preset-react-app/prod"
]
}
}
},
参考链接:github issues
- 5,viewport进行配置
找到暴露出来的 webpack.config.js,在 config 文件夹中,然后对里面的数据进行配置,如果和下图类似,那么下面的结构可以这样配置
加入这段代码
[
'postcss-px-to-viewport',
{
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport. -- 一般不需要配置
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}
],
结果如图
适配到此结束,下面就是一些关于适配的引申话题了,有兴趣的可以看看,没兴趣的就打道回府吧。后面想着使用vite
进行适配移动端的效果。目前正在进行中,主要是通过vite搭建react项目,然后对项目进行rem
适配,最后引入antd-mobile
组件,在vite.config.js
中进行antd-mobile
按需加载。以后如果好了,会将链接放在此处,目前先占个位置
4,引申,移动端适配方案
- 4.1 flexible方案
flexible
方案是阿里早期的一个开源移动端适配解决方案,引用flexible
后,在页面上我们统一使用rem
来布局,rem
相对于html
节点的font-size
进行的计算,其核心代码如下:
通过设置// set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit();
document.documentElement.style.fontSize
就可以统一整个页面的布局标准 - 4.2 vh、vw方案
vh、vw
方案即将视觉视口宽度window.innerWidth
和视觉视口高度window.innerHeight
等分为 100 份- 如果视觉视口为
750px
,那么1vw = 7.5px
,这时UI
给定一个元素的宽为75px
(设备独立像素),我们只需要将它设置为75 / 7.5 = 10vw
番外
通过写作,不断的提升自己。提升自己才是王道,给自己留下笔记,日后好相见。