CSS 單位說明

絕對單位範例

css

.absolute-units {/*絕對單位 像素（最常用） */
  width: 300px;
  height: 200px;
  font-size: 16px;
  border: 2px solid #2c3e50;
}

html

<div class="absolute-units">
    這個區塊是 <strong>300px × 200px</strong><br>
    字體大小固定為 <strong>16px</strong>
  </div>

相對單位範例

css

body {
      font-size: 16px;  /* 根元素字體大小 = 16px (基準) */
      background: #f9f9f9;
    }

.container {
      width: 600px;
      margin: 0 auto;
      padding: 20px;
      background: #ecf0f1;
      border: 2px solid #2c3e50;
    }


.relative-units {
  width: 50%;/* 相對於父元素 .container 的寬度 → 600px * 50% = 300px */
  font-size:  1.2em;/* 相對於父元素字型大小 (16px → 16 * 1.2 = 19.2px) */
  margin: 1rem; /* 相對於根元素字型大小 (16px → 16px margin) */
  line-hgight: 1.5;/* 行高 = 1.5 倍字體大小 → 19.2px * 1.5 ≈ 28.8px */
  background: #fff;
  padding: 10px;
  border: 2px dashed #34495e;
}

html

 <div class="container">
    <p>這是父容器 (600px 寬)。裡面的區塊使用了 <code>.relative-units</code>。</p>

    <div class="relative-units">
      我是相對單位的區塊 🎯<br>
      - 寬度 = 父容器的 50% (300px)<br>
      - 字體大小 = 父容器字體的 1.2 倍 (~19.2px)<br>
      - 外距 (margin) = 根元素字體大小的 1rem (16px)<br>
      - 行高 = 字體大小的 1.5 倍 (~28.8px)
    </div>
  </div>

視窗單位範例

css

.viewport-units {
 width: 50vw;/* 視窗寬度的50% */
 height: 100vh;/* 視窗高度的100% */
 font-size: 4vmin;/* 視窗較小邊的4% */
 padding: 2vmax;/* 視窗較大邊的2% */
}

html

<div class="viewport-units">
  寬度 = 50vw (視窗的一半)<br>
  高度 = 100vh (整個視窗高)<br>
  字體大小 = 4vmin (短邊 4%)<br>
  內距 = 2vmax (長邊 2%)
</div>

實用的尺寸設定

css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  max-width: 1200px;/* 最大寬度 */
  min-height: 320px;/* 最小寬度 */
  margin: 0 auto;/* 水平置中 */
  padding: 0 20px; /* 左右內距 */
  
}

.full-height {
  min-height: 100vh;/* 至少占滿整個視窗高度 */
  background-color: #3333;
}

.responsive-image {
  max-width: 100%;/* 響應式圖片基本設定 */
  height: auto;
}

html

<div class="full-height">
    <h1>全螢幕高度區塊</h1>
  </div>

  <div class="container">
    <h2>文章內容容器</h2>
    <p>
      這個區塊有 <code>.container</code> 限制最大寬度 1200px，最小 320px，並水平置中。
    </p>

    <h2>響應式圖片</h2>
    <p>圖片會自動縮放，不會超過容器寬度：</p>
    <img class="responsive-image" src="https://picsum.photos/1200/600" alt="隨機圖片">
  </div>