設計稿1920px，如何用rem實現完美的屏幕適配？

rem布局方案：完美適配1920px設計稿

響應式設計中，rem單位的運用是關鍵。本文將詳細講解如何利用rem單位，針對1920px設計稿實現完美的屏幕適配。

許多開發者在使用rem時，會疑惑如何根據設計稿動態調整html的font-size。 直接使用font-size = document.width / 10的方法并不理想。更準確的做法是將設計稿寬度作為基準，利用calc()函數動態計算html元素的font-size。

最佳實踐：

我們以1920px設計稿為例，使用以下代碼：

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

這段代碼將視口寬度(100vw)除以19.2，確保1rem 等于設計稿中的10px。 這意味著，每個css像素占據視口寬度的1/19.2。

舉例說明：

如果設計稿中有一個100px * 100px的盒子，那么在CSS中，我們可以這樣定義：

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

通過這種方式，頁面會根據視口寬度自動調整html的font-size，從而確保rem單位與設計稿像素精準對應，實現基于1920px設計稿的完美響應式布局。 無需復雜的JavaScript計算，就能輕松實現跨設備的完美適配。