Day 28 - 響應式網頁設計（數值設定）

18th鐵人賽 day 28 css html rwd

饅頭

團隊第二屆技術創作市集

2026-09-16 12:01:12

77 瀏覽

分享至

數值設定

響應式網頁設計中，尺寸設定多採用相對單位，來進行設定。元素可能會相對於視窗、父元素或根元素等，有時候也會限制最大值或最小值。接下來會介紹各種常見的數值設定方式與應用技巧。

響應式相對單位

在前面的章節介紹了許多 CSS 屬性，許多跟尺寸有關的屬性，除了使用固定的絕對單位 px 做為設定，響應式網頁通常會使用相對單位，讓元素尺寸根據環境自動調整。以下整理常用的響應式尺寸單位：

除了以上單位外，CSS 還有許多新的視窗單位。如果要使用較新或特殊的單位，記得先確認裝置是否支援喔！
像是 100dvh，會隨著手機瀏覽器介面展開或收合，動態計算當下的可用高度。雖然能讓內容貼合目前的視窗高度，但使用者捲動時高度可能持續變化，造成畫面跳動或重新排版，因此不適合用在需要穩定高度的區塊！

clamp() 函數

clamp() 函數可以設定數值的最小值、首選值和最大值，是實現流暢響應式設計的利器。

clamp() 的優點是能讓數值在範圍內流暢變化，不需要設定多個 media query 斷點。

進階應用

雖然前幾天介紹過使用 @media 設定斷點的方法，能根據不同的視窗尺寸套用不同的 CSS 排版，讓手機版與電腦版都能獲得適當的顯示效果；但由於 @media 通常是在原有屬性之後不斷堆疊設定，透過追加與覆蓋的方式調整 CSS，使用過多容易造成樣式碎片化、難以維護，也就是所謂的「斷點地獄」！！

因此，如果可以減少 @media 中的設定，那就應該盡量減少，讓元件根據自身的容器限制與內容尺寸自然流動、換行，而減少依賴螢幕的視窗寬度！

接下來介紹幾個實用的範例，推薦大家參考：

版心置中：如果希望元素在寬螢幕下有最大寬度，在窄螢幕下則撐滿可用寬度，通常可以使用 @media 來設定：
```
.container {
    width: 100%;
    max-width: 1200px;
    padding: 0 16px;
    margin: 0 auto;
    box-sizing: border-box;
    @media (min-width: 1024px) {
        padding: 0 40px;
    }
}
```
不過，也可以利用 min() 搭配 calc()，不需要設定斷點，就能同時限制最大寬度並保留左右安全邊距：
```
.container {
    /* 寬度取 1200px 與「扣除兩側 2rem 邊距後的寬度」中的較小者 */
    width: min(1200px, calc(100% - 4rem));
    margin: 0 auto;
}
```
- 當可用寬度較小時，容器會使用 calc(100% - 4rem)，保留左右各 2rem 的間距。
- 當可用寬度足夠時，容器的寬度最多維持在 1200px，並透過 margin: 0 auto 自動置中。
- 因此，不需要依賴斷點調整 padding，也能讓版心在不同寬度下維持適當的間距。
動態網格：如果要設定 Grid 每欄的數量，一般的做法是針對手機寫 1 欄、平板寫 2 欄、電腦寫 4 欄。如果改用 CSS Grid 的內在佈局，只要設定「每個卡片的最小寬度」，瀏覽器就會自動計算每行該塞幾張。
```
.card-grid {
    display: grid;
    /* auto-fit 會自動計算欄數，卡片寬度通常不小於 280px，剩餘空間由 1fr 平均分配 */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
}
```
- minmax(min(100%, 280px), 1fr)：卡片寬度通常不小於 280px，空間足夠時會由 1fr 平均分配剩餘空間。
- min(100%, 280px) 是關鍵細節：如果容器寬度小於 280px，卡片的最小寬度會改為容器的 100%，避免卡片超出容器而產生水平捲軸。

流動文字與間距：以往標題字體大小常常在各個斷點換來換去（如 24px → 32px → 48px），跳轉時容易造成版面突變。使用 clamp() 可以讓標題大小隨著畫面寬度平滑變化。

h1 {
    /* clamp(最小值, 首選變動值, 最大值) */
    font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.75rem);
    line-height: 1.4;
}

p {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.8;
}

.section {
    /* 區塊內距也能使用 clamp()，讓小螢幕較緊湊、大螢幕較寬鬆 */
    padding: clamp(2rem, 5vw, 6rem) 0;
}

HTML 結構可以依照標題層級安排，h1 通常代表頁面的主標題，h2 代表主要段落標題，h3 則代表次要段落標題：

<main class="section">
    <h1>響應式網頁設計</h1>
    <p>使用流動字體，讓文字在不同螢幕尺寸下都能保持良好的閱讀體驗。</p>

    <h2>數值設定</h2>
    <p>透過 clamp() 設定字體大小，讓文字隨著畫面寬度平滑變化。</p>

    <h3>標題與內文</h3>
    <p>標題與內文各自設定合適的大小和行高，可以建立清楚的閱讀層次。</p>
</main>

字體或間距以 vw（視窗寬度比例）為基準連續縮放，同時被設定了底線與天花板，既不會在小螢幕被撐爆，也不會在 4K 螢幕無限放大。

自動圓角：如果希望元素在有足夠空間時顯示圓角，貼近螢幕邊緣時則取消圓角，可以比較視窗與元素的寬度差異。
```
.card-surface {
    /* 計算結果為負值時，使用 0px 取消圓角 */
    border-radius: max(0px, calc(sign(100vw - 100%) * 40px));
}
```
這段 CSS 的計算方式如下：
- 100vw：表示視窗寬度。
- 100%：表示 .card-surface 的寬度。
- sign(100vw - 100%)：比較視窗與元素的寬度，結果會是 1、0 或 -1。
- calc(... * 40px)：將結果轉換成 40px、0px 或 -40px。
- max(0px, ...)：負值會被轉換成 0px，因此可以取消圓角。
斷點的計算方式不是固定寫死某個數字，而是找出下列條件成立的寬度：
```
視窗寬度 = 元素寬度
```
例如：
- 視窗 1440px、元素 1200px：1440 - 1200 = 240，結果為 1，圓角為 40px。
- 視窗 1200px、元素 1200px：1200 - 1200 = 0，圓角為 0px。
- 視窗 768px、元素 800px：768 - 800 = -32，結果為負值，最後由 max() 轉為 0px。
因此，這個範例的斷點會隨著元素寬度改變；元素寬度若是固定的 1200px，斷點大約就是 1200px，不需要另外撰寫 @media。
這個圓角範例，是在寫鐵人賽的期間看到的，覺得很實用，剛好可以補充上來分享給大家！詳細討論可以看看：TAK X@tak_dcxi、jhey X@jh3yy