1. @media媒体查询适配

利用html标签为基准，然后用rem设配页面

复制 1html {
 2  font-size: 16px; 
 3}
 4...
 5@media (min-width: 1024px) {
 6  html {
 7    font-size: 14px; 
 8  }
 9}
10@media (min-width: 1440px) {
11  html {
12    font-size: 16px; 
13  }
14}

2. 插件postcss-pxtorem

他是postcss插件npm install postcss-pxtorem --save-dev

配置如下：

复制 1
 2module.exports = {
 3  plugins: {
 4    'postcss-pxtorem': {
 5      rootValue: 16, 
 6      unitPrecision: 5, 
 7      propList: ['*', '!min-width', '!max-width'], 
 8      selectorBlackList: [], 
 9      replace: true, 
10      mediaQuery: false, 
11      minPixelValue: 0 
12    }
13  }
14};
15
16export default defineConfig({
17  css: {
18    postcss: './postcss.config.cjs',
19  }
20})

在我们的css、less、scss文件里面，你可以自由的使用px，在打包的时候postcss-pxtorems插件，他会自动将px转化成rem

3. 利用js动态修改根元素的 font-size

利用js，无论视口宽度如何变化，页面元素都会根据基准值动态调整大小，确保良好的适配效果。在加上px转化为rem的技术更是提高了适配的灵活性。

工具函数

复制 1
 2function setRootFontSize(): void {
 3     const docEl = document.documentElement;
 4     const clientWidth = docEl.clientWidth;
 5     if (!clientWidth) return;
 6     const baseFontSize = 16; 
 7     const designWidth = 1920; 
 8     docEl.style.fontSize = (baseFontSize * (clientWidth / designWidth)) + 'px';
 9   }
10   export default setRootFontSize;
11 
12

app 组件使用

复制 1
 2import setRootFontSize from '../utils/setRootFontSize';
 3import { useEffect } from 'react';
 4 
 5export default function App() {
 6  useEffect(() => {
 7    setRootFontSize(); 
 8    window.addEventListener('resize', setRootFontSize);   
 9    return () => {    
10      window.removeEventListener('resize', setRootFontSize);
11    };
12  }, []);
13  
14  return (
15    <>
16      <div>
17        <MyRoutes />
18      </div>
19    </>
20  )
21}
22

注：如果你使用了 setRootFontSize 动态调整根元素的 font-size，就不再需要使用 @media 查询来调整根元素的字体大小了。这是因为 setRootFontSize 函数已经根据视口宽度动态调整了 font-size，从而实现了自适应。

注意事项：

• 动态rem此方案比较适合H5屏幕适配
• 注意: PostCSS 转换rem应排除 min-width 、max-width、min-height和max-height ，以免影响整体界面

1. 弹性盒模型（Flexbox）

复制 1.container {
 2  display: flex;
 3  flex-wrap: wrap;
 4}
 5 
 6.item {
 7  flex: 1 1 100%; 
 8}
 9 
10@media (min-width: 600px) {
11  .item {
12    flex: 1 1 50%; 
13  }
14}
15 
16@media (min-width: 1024px) {
17  .item {
18    flex: 1 1 33.33%; 
19  }
20}

2. 栅格系统（Grid System）

复制 1.container {
 2  display: grid;
 3  grid-template-columns: 1fr; 
 4  gap: 10px;
 5}
 6 
 7@media (min-width: 600px) {
 8  .container {
 9    grid-template-columns: 1fr 1fr; 
10  }
11}
12 
13@media (min-width: 1024px) {
14  .container {
15    grid-template-columns: 1fr 1fr 1fr; 
16  }
17}

3. 百分比和视口单位

复制 1
 2  .container {
 3    width: 100%;
 4    height: 50vh; 
 5}
 6 
 7.element {
 8  width: 50%; 
 9  height: 10vw; 
10}

4. 响应式图片

利用img的srcset 和 sizes 属性，实现根据设备分辨率和尺寸加载不同版本的图片，以提高性能和视觉效果。

复制 1<!-- 示例：响应式图片 -->
 2  <img 
 3    src="small.jpg" 
 4    srcset="medium.jpg 600w, large.jpg 1024w" 
 5    sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33.33vw" 
 6    alt="Responsive Image"
 7  />

5. CSS变量

利用：root在全局下面定义样式变量，然后利用var引入

复制 1:root {
 2  --main-padding: 20px;
 3}
 4 
 5.container {
 6  padding: var(--main-padding);
 7}
 8 
 9@media (min-width: 600px) {
10:root {
11    --main-padding: 40px;
12  }
13}