初學者指南:CSS 中 % 和 vw 的差異

更新日期: 2024 年 10 月 28 日

在進行網頁設計時,CSS(層疊樣式表) 提供了多種單位來控制元素的寬度和高度,讓我們可以靈活地設計出響應式的網頁。

當你在學習如何控制元素大小時,可能會遇到兩個常見的單位:%(百分比)vw(視口寬度)

這兩種單位在網頁佈局中,各有其特定的應用場景和特點。

本文將幫助新手了解這兩個單位的差異,以及它們在實際應用中的用法。


什麼是 %(百分比)?

%(百分比) 是 CSS 中用來定義相對於父元素尺寸的單位。

當你使用百分比設置元素的寬度或高度時,它的大小是根據它的父元素來計算的。

例如,假設你有一個父容器的寬度是 800px,如果你將子元素的寬度設為 50%,那麼子元素的寬度就是 400px,這是父容器寬度的一半。

HTML

<div class="parent">
  <div class="child">我是 50% 的寬度</div>
</div>

CSS

.parent {
  width: 800px;
}

.child {
  width: 50%;
  background-color: lightblue;
}
  • 優勢
    • 根據父元素自適應,可以根據父元素大小自動調整,適合用於內部元素的佈局。
    • 非常適合需要保持元素與其父元素比例一致的場景。
  • 限制
    • 需要依賴父元素的大小,無法獨立存在。
    • 當父元素的大小改變時,百分比元素也會跟著改變,這有時候可能會導致你預期外的結果。

什麼是 vw(視口寬度)?

vw(viewport width) 是基於視口寬度的單位。視口指的是使用者瀏覽器可見的部分。

1vw 等於視口寬度的 1%。例如,如果瀏覽器的寬度是 1000px,那麼 1vw 就等於 10px。

HTML

<div class="box">我是 50vw 的寬度</div>

CSS

.box {
  width: 50vw;
  background-color: lightcoral;
}

在這個例子中,無論容器是什麼,這個元素的寬度都會是視口寬度的 50%。

如果視口寬度是 1200px,那麼元素的寬度就是 600px;如果視口寬度變成 800px,那麼元素的寬度就是 400px。

  • 優勢
    • 相對於視口進行縮放,無論元素的父容器大小如何,vw 單位始終基於視口來計算。
    • 非常適合讓元素隨著整個視口的大小進行調整,適合全局佈局的設計。
  • 限制
    • 當視口大小改變時(例如縮小瀏覽器窗口),使用 vw 單位的元素會隨著視口縮小,這有時可能導致元素變得過小或過大。
    • 無法根據父元素大小自動調整,適用於全局響應設計,但對於局部佈局可能不太靈活。

% 和 vw 的比較

依賴對象不同

  • %(百分比):基於父元素的尺寸進行計算。如果父元素改變大小,子元素也會跟著改變。
  • vw(視口寬度):基於視口(瀏覽器窗口)的寬度進行計算,與父元素無關。

適用場景

  • %(百分比):適合內部元素的比例佈局,尤其是需要根據父元素動態改變大小的情況。

    例如,在表單、區塊內部的元素佈局。
  • vw(視口寬度):適合全局的響應式設計。

    例如,你想讓一個橫幅(banner)始終佔據視口的一半寬度,那麼使用 vw 會非常方便。

靈活性

  • %(百分比) 更靈活於局部調整,但需要依賴父元素的大小,這對於多層次嵌套的佈局可能會帶來挑戰。
  • vw(視口寬度) 在設計全局佈局時非常實用,能夠確保頁面元素根據視口變化而自動縮放。

實際應用範例

以下是一個簡單的例子,展示如何使用 % 和 vw 來控制兩個不同元素的寬度。

HTML

<div class="parent">
  <div class="child">百分比寬度</div>
</div>
<div class="fullwidth">視口寬度</div>

CSS

.parent {
  width: 60%;
  margin: 0 auto;
  background-color: lightgray;
}

.child {
  width: 50%;
  background-color: lightblue;
}

.fullwidth {
  width: 50vw;
  background-color: lightcoral;
  margin-top: 20px;
}
  • 第一個元素使用 % 來設定寬度,這樣它會根據父容器(60% 的寬度)進行調整,子元素則是父元素的一半寬度。
  • 第二個元素使用 vw,設定寬度為視口的 50%,這樣它的寬度會隨著視口的變化而自動調整。

小結

在網頁設計中,理解 CSS 單位的差異對於創建響應式佈局至關重要。

% 更適合於相對於父元素的局部佈局,而 vw 則適合相對於整個視口的全局設計。

兩者各有其優勢和限制,選擇哪種單位取決於你希望如何控制元素的大小以及頁面的整體效果。

希望這篇文章能幫助你理解 % 和 vw 的基本概念,並能夠在適當的場景中選擇合適的單位來達成理想的設計效果!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *