你知道的H5屏幕的适配方案有哪些？

2024-09-18

532 字约 2 分钟

...

1. @media媒体查询适配

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

html {
  font-size: 16px; 
}
...
@media (min-width: 1024px) {
  html {
    font-size: 14px; 
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 16px; 
  }
}

2. 插件postcss-pxtorem

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

配置如下：


module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, 
      unitPrecision: 5, 
      propList: ['*', '!min-width', '!max-width'], 
      selectorBlackList: [], 
      replace: true, 
      mediaQuery: false, 
      minPixelValue: 0 
    }
  }
};

export default defineConfig({
  css: {
    postcss: './postcss.config.cjs',
  }
})

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

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

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

工具函数


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;

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 (
    <>
      <div>
        <MyRoutes />
      </div>
    </>
  )
}

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

注意事项：

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

1. 弹性盒模型（Flexbox）

.container {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  flex: 1 1 100%; 
}
 
@media (min-width: 600px) {
  .item {
    flex: 1 1 50%; 
  }
}
 
@media (min-width: 1024px) {
  .item {
    flex: 1 1 33.33%; 
  }
}

2. 栅格系统（Grid System）

.container {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 10px;
}
 
@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr; 
  }
}
 
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr; 
  }
}

3. 百分比和视口单位


  .container {
    width: 100%;
    height: 50vh; 
}
 
.element {
  width: 50%; 
  height: 10vw; 
}

4. 响应式图片

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

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

5. CSS变量

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

:root {
  --main-padding: 20px;
}
 
.container {
  padding: var(--main-padding);
}
 
@media (min-width: 600px) {
:root {
    --main-padding: 40px;
  }
}