一些適合 H5 屏幕適配方案

一、動態 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 (
    <>
      <div>
        <MyRoutes />
      </div>
    </>
  )
}
/**APP**/

這樣，無論視口寬度如何變化，頁面元素都會根據基準值動態調整大小，確保良好的適配效果。通過上述步驟，可以實現佈局使用 px，並動態轉換爲 rem 的適配方案。這個方案不僅使得樣式編寫更加簡潔，還提高了適配的靈活性。

注：如果你使用了 setRootFontSize 動態調整根元素的 font-size，就不再需要使用 @media 查詢來調整根元素的字體大小了。這是因爲 setRootFontSize 函數已經根據視口寬度動態調整了 font-size，從而實現了自適應。

  1. 動態調整根元素 font-size 的優勢：
  1. @media 媒體查詢的優勢：

這種方式簡化了響應式設計，使得樣式統一管理更加簡單，同時保留了靈活性和適應性。

6. 效果對比（非 H5 界面）

圖一爲界面px 適配，效果爲圖片，文字等大小固定不變。

圖二爲動態rem適配：整體隨界面擴大而擴大，能夠保持相對比例。

Screen-2024-06-13-155704-ezgif.com-video-to-gif-converter

7. Tips

二、其他適配

1. 彈性盒模型（Flexbox）

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）

柵格系統是一種常見的響應式佈局方案，廣泛應用於各種框架（如 Bootstrap）。通過定義行和列，可以輕鬆地創建複雜的佈局。

.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. 百分比和視口單位

使用百分比（%）、視口寬度（vw）、視口高度（vh）等單位，可以根據視口尺寸調整元素大小。

  /* 示例：百分比和視口單位 */
  .container {
    width: 100%;
    height: 50vh; /* 高度爲視口高度的一半 */
}

.element {
  width: 50%; /* 寬度爲容器的一半 */
  height: 10vw; /* 高度爲視口寬度的 10% */
}

4. 響應式圖片

根據設備分辨率和尺寸加載不同版本的圖片，以提高性能和視覺效果。可以使用 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 Custom Properties（CSS 變量）

使用 CSS 變量可以更靈活地定義和調整樣式，同時通過 JavaScript 動態改變變量值實現響應式設計。

:root {
  --main-padding: 20px;
}

.container {
  padding: var(--main-padding);
}

@media (min-width: 600px) {
:root {
    --main-padding: 40px;
  }
}
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/NW0weM7aCgQ1o_IcFUrHQQ

猜你喜歡