一、移動端圖片適配

1、使用?<img>?的?srcset

<img src="logo.png"srcset="logo@2x.png 2x,logo@3x.png 3x"alt="Logo">

優點：原生支持，瀏覽器自動選擇最合適的圖片。

2、使用媒體查詢切換背景圖

.logo {background-image: url("logo.png");
}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {.logo {background-image: url("logo@2x.png");background-size: contain;}
}

適用場景：適用于背景圖或圖標等需要精細控制的場景。

二、適配不同屏幕大小（響應式布局）

為了使頁面在各種設備上都能良好顯示，應避免使用固定單位 px，而采用相對單位來布局，如：

單位	說明	推薦指數
rem	相對于根元素字體大小，適合全局控制	?????
vw/vh	視口寬度/高度的百分之一，適合全屏布局	????
em	相對于當前元素字體大小，適合局部組件	???

三、推薦方案：使用?rem?+ JS 動態計算字號（主流做法）

這是目前移動端開發中最常用的適配方案，尤其適合以 750px 或 640px 為標準設計稿的項目。

1. 設置視口 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

2. 動態設置 HTML 根字號（JS 控制）

function setRem() { const baseSize = 16; // 假設設計稿寬度為 750px，1rem = 16pxconst scale = document.documentElement.clientWidth / 750; 
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; 
} 
window.addEventListener('resize', setRem); 
setRem();

📌 說明：

• 通過 JavaScript 動態調整 html 的 font-size，從而讓 rem 的值隨屏幕變化；
• 設置最大縮放比例（如不超過 2 倍），防止文字過大影響體驗。

3. 編寫樣式時使用 rem 單位

.container { width: 750px; /* 按照設計稿數值 */ font-size: 16px; /* 對應 1rem */ } 
.title { font-size: 1.5rem; /* 實際為 24px */ }

📌 優化建議：

• 使用 PostCSS 插件 postcss-pxtorem 可以自動將 px 轉換為 rem，提升開發效率；
• 配合 Vue CLI、Vite 等現代構建工具，可一鍵完成轉換。

---

四、備選方案：使用 vw/vh 實現響應式布局

適用于不需要復雜交互、結構簡單的頁面，比如 H5 頁面、營銷頁等。

.title { font-size: 5vw; /* 字體大小隨視口寬度變化 */ } 
.fullscreen { width: 100vw; height: 100vh; }

優點：

• 不依賴 JavaScript；
• 實現簡單直觀。

缺點：

• 在 iOS 上軟鍵盤彈出會影響 vh 計算；
• 字體大小波動較大，可能影響閱讀體驗。

---

五、完整的移動端適配流程總結

步驟	內容
1?? 獲取設計稿	明確設計稿寬度（如 750px）
2?? 設置 viewport	<meta name="viewport"> 必不可少
3?? 設置 root font-size	JS 動態設置 html 的 font-size
4?? 編寫樣式	使用 rem 或 vw/vh 單位編寫樣式
5?? 多倍圖處理	使用 srcset 或媒體查詢加載高清圖
6?? 媒體查詢優化	針對特殊設備做微調（如 iPad、折疊屏）