一、动态rem适配方案：适合H5项目的适配方案
1. @media媒体查询适配
首先，我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态调整根元素的
font-size
。
html
{
font-size
:
16px
;
/* 默认基准值 */
}
...
@media
(
min-width:
1024px
) {
html
{
font-size
:
14px
;
/* 适配较大屏幕 */
}
}
@media
(
min-width:
1440px
) {
html
{
font-size
:
16px
;
/* 适配超大屏幕 */
}
}
2. PostCSS 插件（自动转换）实现 px2rem
手动转换
px
为
rem
可能很繁琐，因此可以使用
PostCSS
插件
postcss-pxtorem
来自动完成这一转换。
2.1 安装 postcss-pxtorem
首先，在项目中安装 postcss-pxtorem 插件：
npm install postcss-pxtorem --save-dev
2.2 配置 PostCSS
然后，在项目根目录创建或编辑 postcss.config.js 文件，添加 postcss-pxtorem 插件配置：
/* postcss.config.cjs */
module
.exports = {
plugins
: {
'postcss-pxtorem'
: {
rootValue
:
16
,
// 基准值，对应于根元素的 font-size
unitPrecision
:
5
,
// 保留小数点位数
propList
: [
'*'
,
'!min-width'
,
'!max-width'
],
// 排除 min-width 和 max-width 属性
selectorBlackList
: [],
// 忽略的选择器
replace
:
true
,
// 替换而不是添加备用属性
mediaQuery
:
false
,
// 允许在媒体查询中转换 px
minPixelValue
:
0
// 最小的转换数值
}
}
};
/* vite */
export
default
defineConfig({
css
: {
postcss
:
'./postcss.config.cjs'
,
}
})
3. 在 CSS/SCSS 中使用 px
在编写样式时，依然可以使用
px
进行布局：
.container
{
width
:
320px
;
padding
:
16px
;
}
.header
{
height
:
64px
;
margin-bottom
:
24px
;
}
4. 构建项目
通过构建工具（如
webpack/vite
）运行项目时，
PostCSS
插件会自动将
px
转换为
rem
。
5. 可以不用@media媒体查询，动态动态调整font-size
为了实现更动态的适配，可以通过
JavaScript
动态设置根元素的
font-size
：
/**utils/setRootFontSize**/
function setRootFontSize(): void {
const docEl = document.documentElement;
const clientWidth = docEl.clientWidth;
if (!clientWidth) return;
const baseFontSize = 16; // 基准字体大小
const designWidth = 1920; // 设计稿宽度
docEl.style.fontSize = (baseFontSize * (clientWidth / designWidth)) + 'px';
}
export default setRootFontSize;
/**utils/setRootFontSize**/
/**APP**/
import setRootFontSize from '../utils/setRootFontSize';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
// 设置根元素的字体大小
setRootFontSize();
// 窗口大小改变时重新设置
window.addEventListener('resize', setRootFontSize);
// 清除事件监听器
return () => {
window.removeEventListener('resize', setRootFontSize);
};
}, []);
return (
<>
)
}
/**APP**/
这样，无论视口宽度如何变化，页面元素都会根据基准值动态调整大小，确保良好的适配效果。通过上述步骤，可以实现布局使用
px
，并动态转换为
rem
的适配方案。这个方案不仅使得样式编写更加简洁，还提高了适配的灵活性。
注：如果你使用了 setRootFontSize 动态调整根元素的
font-size
，就不再需要使用 @media 查询来调整根元素的字体大小了。这是因为
setRootFontSize
函数已经根据视口宽度动态调整了 font-size，从而实现了自适应。
-
-
更加灵活：可以实现更加平滑的响应式调整，而不是依赖固定的断点。
-
统一管理：所有的样式都依赖根元素的 font-size，维护起来更加简单。
-
尽管不再需要用
@media
查询来调整根元素的
font-size
，但你可能仍然需要使用
@media
查询来处理其他的响应式设计需求，比如调整布局、隐藏或显示元素等。
这种方式简化了响应式设计，使得样式统一管理更加简单，同时保留了灵活性和适应性。
6. 效果对比（非H5界面）
图一为界面
px
适配，效果为图片，文字等大小固定不变。
图二为动态
rem
适配：整体随界面扩大而扩大，能够保持相对比例。
Screen-2024-06-13-155704-ezgif.com-video-to-gif-converter
t11b673bcd6119f4e6a5e9509cf
7. Tips
-
-
注意:
PostCSS
转换
rem
应排除
min-width
、
max-width
、
min-height
和
max-height
，以免影响整体界面
二、其他适配
1. 弹性盒模型（Flexbox）
Flexbox
是一种布局模型，能够轻松地实现响应式布局。它允许元素根据容器的大小自动调整位置和大小。
.container {
display
: flex;
flex-wrap: wrap;
}
.item {
flex
:
1
1
100
%;
/* 默认情况下每个元素占满一行 */
}
@media (min-width:
600
px) {
.item {
flex
:
1
1
50
