CSS計量單位

開發前端頁面離不開樣式的設置，而樣式的設置離不開計量單位的應用。在CSS中一共有五種類型的計量單位：像素（px）、百分比（%）、ems、rem、視口寬度（vw）和視口高度（vh）。不同的計量單位在不同的應用場景下，可以發揮出其優勢。下文將對前端開發中常用的幾種計量單位進行詳細介紹。

一、像素（px）

在CSS中，像素是最常用的一種計量單位。像素是最基本的物理計量單位，指的是顯示器上的一個小點。計算機顯示器解析度越高，每英寸上的像素點就越多，顯示效果也就越細膩。一個像素在Web頁面上的大小是由顯示器的解析度來決定的，所以當設計師在設計Web頁面時使用像素單位，設計出來的頁面在不同解析度的顯示器上，看起來就會不同。

像素單位的好處在於它們是一致、精確的，並且不受其他因素的影響。如果你需要知道一個容器或元素的確切大小，那麼像素單位是最好的選擇。但使用像素單位的缺點在於，不同顯示器尺寸和解析度的設備上，同一像素尺寸所對應的物理尺寸可能會相差很大，導致用戶體驗存在較大的差異。

二、百分比（%）

百分比是指相對於所屬容器大小的百分比。相對於父元素的百分比，是相對於最近具有定位的祖先元素的百分比，如果都沒有則是相對於body元素的百分比。百分比單位的好處在於，他們可以自適應瀏覽器窗口或父元素尺寸的變化。當我們設置一個元素的寬度為50%時，它會佔用其父元素50%的寬度。

百分比易於理解，但和像素不一樣的是，它是相對於其父元素而言的。它的優點在於它會隨著父容器的尺寸變化而變化，因此使用百分比計算尺寸時不容易出錯，可以適配更多屏幕解析度。但同時缺點是難以根據絕對長度進行操作和確定，如果係數不準確，則會導致元素邊界不符合設計意圖。

三、ems

em是一個極有用的計量單位，它指定元素字體的大小和行高，隨著字體大小而變化。1em等於元素父元素中的字體大小。完整的定義是，在定義字體大小時，1em等於該元素之前所有父元素中的字體大小，即在繼承鏈中的前一個字體大小。例如，如果某個的字體大小定義為2em，那麼其大小就是其父元素字體大小的兩倍。這種相對於父元素字體大小的計量方式，可以很好的根據瀏覽器定製的字體大小進行縮放。

em可以精確定義某個元素的大小，因此它特別適合在頁面排版中定義大段文字區域的大小，或者相對於某個元素定義其它元素的大小。但em的缺點在於，它需要知道父節點的大小，因此當開發者在編寫代碼時，尤其是嵌套很深的情況下，很難計算出其準確的尺寸，容易造成尺寸異常等問題。

四、rem

rem的全稱是root em，它和em的計算方式類似，但是相對的標準是根元素的字體大小，這裡的根元素指的是元素。使用rem的好處在於，網頁在根元素的字體大小變化時，整個頁面都可以按比例變化，可適應不同解析度、不同設備。CSS3開始支持rem單位，越來越多的前端企業在使用rem。

rem和em適用的情況類似，但rem不孕育繼承問題，而且在設置字體時，它所經歷的層次比較淺，更易於控制。而且rem可以簡化樣式的設置流程，任何元素的大小都可以使用同一套rem規則制定。

五、視口寬度（vw）和視口高度（vh）

相比於以前的計量單位，vw和vh單位是相對較新的單位。其中vw代表視口寬度的 1/100，vh代表視口高度的1/100。它們的運用使得設備的物理尺寸和屏幕尺寸的無關，而是將其尺寸與視口的尺寸掛鉤。當視口大小發生變化時，元素的尺寸以相應比例發生變化。

vw和vh通常用來使得網頁在不同尺寸的顯示器顯示時自適應，並且它也十分適合做桌面應用的響應式設計。同時使用這些單位也可能會增加代碼的可讀性，但也要注意根據視口大小和屏幕解析度靈活使用適當的布局。

總結

CSS中有多種計量單位，在選取計量單位時，需要綜合考慮元素尺寸、排版布局、屏幕解析度、字體大小等因素。設計稿中常用的單位是像素和em。而rem和vw、vh等計量單位，適用於響應式設計，可以隨父級字體大小，或視口大小進行對頁面元素的字體和布局進行自適應的設置。在開發過程中，開發者也可根據需求進行適當結合運用。

代碼示例：

    <style>
    .box {
        width: 200px;
        height: 200px;
        font-size: 16px;
        line-height: 1.5;
        padding: 10px;
        margin: 20px;
        border: 2px solid #000;
        background-color: #ccc;
    }
    .box1 {
        width: 50%;
        height: 100px;
        margin: 20px 0;
    }
    .box2 {
        width: 8em;
        height: 8em;
        margin: 20px 0;
    }
    .box3 {
        width: 10rem;
        height: 10rem;
        margin: 20px 0;
    }
    .box4 {
        width: 50vw;
        height: 50vh;
        margin: 20px 0;
    }
</style>
<div class="box">像素單位示例</div>
<div class="box1">百分比單位示例</div>
<div class="box2">em單位示例</div>
<div class="box3">rem單位示例</div>
<div class="box4">vw,vh單位示例</div>