從px到rem：CSS布局單位的演變與應用

在前端開發中，我們經常需要用到CSS來實現頁面布局。在過去的幾年間，CSS布局單位也經歷了演變和發展。最開始我們使用的是像素（px）作為單位來設置元素的大小和位置。然而，隨著響應式設計的興起和移動設備的普及，像素單位逐漸暴露出一些問題。為了解決這些問題，新的單位rem應運而生，并逐漸被廣泛應用于CSS布局中。

一、像素單位(px)的局限性
1.1 固定大小
作為最早被廣泛使用的單位，像素單位在布局中具有固定大小的特性。這意味著當頁面在不同設備或不同屏幕尺寸上展示時，像素單位的大小不會自適應，導致頁面布局出現錯亂或無法顯示完整。

1.2 高分辨率設備問題
隨著高分辨率設備的普及，如Retina屏幕，像素單位的缺點更為明顯。當在高分辨率設備上顯示低像素單位設置的元素時，會導致像素化或者顯示模糊，影響用戶體驗。

1.3 編輯復雜
像素單位需要根據設備的分辨率進行調整，這就意味著在編寫CSS時需要考慮不同設備的像素密度，增加了編寫和維護代碼的復雜度。

二、rem單位的介紹
2.1 什么是rem
rem是相對單位，表示相對于根元素（html）的字體大小的單位。它的大小是相對于根元素的字體大小而言的。當我們設置根元素的字體大小為16px時，1rem等于16px。

2.2 rem的優點

自適應布局：使用rem單位可以根據根元素的字體大小自適應調整，從而在不同設備上實現布局的靈活變化。
解決高分辨率設備問題：由于rem是相對單位，不受設備像素密度的影響，可以實現在不同分辨率下保持一致的布局效果。
簡化代碼編寫：使用rem單位可以簡化代碼的編寫，不再需要考慮不同設備的像素密度問題。

三、如何使用rem單位
3.1 設置根元素的字體大小
在使用rem單位之前，需要首先設置根元素的字體大小。通常情況下，我們會將根元素的字體大小設置為16px，即1rem=16px。

html {
  font-size: 16px;
}

3.2 使用rem單位
一旦設置了根元素的字體大小，就可以在其他元素中使用rem單位進行布局。

.container {
  width: 20rem; /* 相當于320px */
  height: 10rem; /* 相當于160px */
  font-size: 1.2rem; /* 相當于19.2px */
  margin-top: 2rem; /* 相當于32px */
}

四、動態改變根元素的字體大小
4.1 媒體查詢
通過媒體查詢可以根據不同的屏幕尺寸動態的改變根元素的字體大小。

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

4.2 JavaScript動態計算
使用JavaScript可以根據屏幕尺寸動態計算根元素的字體大小。

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

五、
通過使用rem單位，我們可以實現響應式布局，解決不同設備上的布局問題。使用rem單位可以使我們的布局更加靈活自適應，同時簡化代碼編寫。在實際項目中，我們應該根據實際需要選擇合適的布局單位，合理使用rem單位來實現更好的用戶體驗。