提升網頁可讀性的CSS relative單位

一、rem、em、px三者的區別及使用場景

在CSS中，我們通常使用像素（px）作為單位用來規定頁面元素的大小。相比於使用%或者em等單位，像素的最大優點就是精確。但是，如果電腦解析度不同，顯示出來的像素就不一樣，從而影響了網頁的可讀性。而rem單位，就是相對於根元素（html）的字體大小來進行計算的。當你改變根元素的字體大小，其他元素的大小也會跟著變化，從而保證網頁的可讀性增強。

em單位是相對於其父元素的字體大小進行計算的。這個特性可以用來實現自適應布局。但是，當元素的父元素字體大小改變時，子元素也會跟著改變，從而影響網頁的布局。因此，相較於em，使用rem更為穩定可靠。

總結起來，像素單位優秀的精度和穩健的適配性，rem能夠保證頁面在不同解析度呈現相同的大小，em則適用於某些局部字體、內邊距等的自適應變化使用當中。

/* 對比rem,px */
/* 1rem = 16px */
html {
  font-size: 16px;
  /* 改變字體大小，其他元素隨之變化 */
}
div {
  width: 1rem;
  height: 1rem;
  /* 根據網頁的字體大小計算元素的大小 */
}
h2 {
  font-size: 2em;
  /* 根據父元素的字體大小計運算元元素的大小 */
}

二、使用relative單位控制元素間的位置

使用relative單位可以輕鬆控制元素在網頁上的位置，不必依靠複雜的定位或者浮動等屬性實現。相較於絕對位置的控制，相對位置的控制更為簡便易用。

對於比較相近的兩個元素，我們可以使用相對位置控制它們在同一位置上的左右排版。下面的代碼可以展示出在同一行中左右排版的兩個元素：

/* 定義左右兩個元素 */
.left {
  position: relative;
  left: -100px;
}
.right {
  position: relative;
  left: 100px;
}

三、使用relative單位控制元素尺寸的伸縮

在網頁設計中，我們常常會遇到需要放大或者縮小網頁元素的需求。使用增大或者減小固定的像素值顯然不是一個好的選擇，這樣只會導致網頁布局凌亂。而使用relative單位可以在維護網頁的整體感覺的同時靈活調整元素的大小。

下面的例子演示了使用relative單位實現放大網頁圖片的功能：

img:hover {
  transform: scale(1.1);
  /* 將元素縮放至原先尺寸的1.1倍 */
}

四、用relative單位定義網頁過渡和動畫效果

通過使用relative單位，我們可以方便地給網頁元素增加過渡或者動畫效果。通過增加transition屬性或者animation屬性，我們可以輕鬆實現複雜的網頁動畫效果，從而使得網頁看起來更加美觀、動感。

下面的代碼定義了一個2秒鐘消失的動畫效果：

.links {
  position: relative;
  opacity: 1;
  /* 先定義元素的初始屬性 */
  transition: opacity 2s ease-in-out;
  /* 元素的opacity屬性在2秒後消失 */
}
.links:hover {
  opacity: 0;
  /* 滑鼠懸停時，元素進行消失*/
}

五、總結

CSS相對單位的出現，方便了網頁的布局和樣式調整。其中，rem單位可以使用相對於根元素的字體大小來進行計算，並且它的某些特性可以幫助實現自適應布局；em單位適用於局部的自適應調整，而主要應用在字體、內邊距等元素的大小調整中。而使用relative單位則可以開始簡潔易讀的控制元素的位置和尺寸。通過掌握相對單位的使用，我們可以為網頁設計注入更大的活力，從而提升用戶的使用體驗。