設計稿寬度為1920像素，如何用REM單位實現移動端自適應布局？

rem自適應布局：輕松應對移動端屏幕適配

移動端開發中，適配不同屏幕尺寸一直是前端工程師面臨的挑戰。本文將詳細講解如何利用rem單位，高效解決基于1920像素設計稿的移動端自適應布局問題。

問題：設計稿寬度為1920像素，如何使用rem單位實現頁面自適應？是否需要動態調整html的font-size，以及如何計算css盒子尺寸？

常見誤區：一種常見的做法是將font-size設置為document.width / 10，并用100 / font-size rem作為盒子尺寸。這種方法并不精確。

正確方法：基于設計稿寬度，利用calc()函數

正確的做法是將設計稿寬度作為基準。我們可以用calc()函數動態計算html根元素的font-size：

html {   font-size: calc(100vw / 19.2); /* 1920px / 100 = 19.2 */ }

這段代碼將1rem定義為設計稿中10像素的長度 (1920px / 100 = 19.2px per 1rem)。 100vw 代表視口寬度的100%。 因此，calc(100vw / 19.2) 會根據視口寬度動態調整font-size，確保頁面比例一致。

有了這個設置，CSS中可以直接使用rem單位定義元素尺寸。例如，設計稿中一個100×100像素的盒子，在CSS中可以這樣寫：

.box {   width: 10rem;   height: 10rem; }

優勢：簡單高效，無需JavaScript

這種方法的核心在于以設計稿寬度為基準，結合calc()函數和rem單位，實現靈活的尺寸調整。它避免了復雜的計算和JavaScript代碼，簡化了開發流程，并保證了頁面在不同屏幕尺寸下的良好適配效果。