CSS 習作｜響應式網站・width、max-width、min-width 是什麼？

更新於 2024/05/05發佈於 2024/04/04閱讀時間約 5 分鐘

▍ block-level element （像水一樣的區塊元素 💦）

進入 width、max-width、min-width 筆記前，再複習一次 block-level element 的特性：區塊元素會盡可能向左和向右延伸，佔據可用的全部寬度。
因此，為 block-level element 設定寬度，可以防止它延伸到其容器的邊緣。
且 block-level element 將依據不同寬度屬性設定，來佔據指定的寬度！

如下圖，沒有設定寬度屬性的區塊元素，會竭盡所能的向左向右不斷延伸，但有被設定寬度屬性的區塊元素，就會像被裝進容器的水一樣，不能動彈 ↓

區塊元素與寬度

寬度要怎麼設定呢？下面開始筆記「width、max-width、min-width」三種不同的寬度屬性設定！

▍➊ width 屬性

CSS width Property

width 用來設定元素的寬度，但 width 不會把 padding、border、margin 所佔據的面積也算進去，如果設定一個元素為 width: 500px; 時，則 width 作用範圍僅在 content-box 區塊↓：

盒模型

※ 注意：min-width 和 max-width 屬性會覆寫 width 屬性。

將容器設定 width: 1000px;，伸縮瀏覽視窗時，變化如下↓：

當瀏覽視窗伸縮至小於解析度 1000px 時，帶有 width: 1000px; 的容器仍不被壓縮大小，且瀏覽器產生捲軸 Scrollbar。

閱讀 w3schools CSS width Property

▍➋ max-width 屬性

CSS max-width Property
max-width 用來設定元素的最大寬度，當一個容器被設為 max-width: 500px; 時，放在容器裡的  文字段落，無論字數有多少字， 都會被限制在 max-width: 500px; 這個空間裡面，如下↓：

而當拉寬瀏覽器視窗時，被設為 max-width: 500px; 的容器以及放在容器裡的，依舊會被限制在這個寬度裡面，不會因為視窗變寬而改變寬度。
而且，當縮小瀏覽器，使視窗螢幕解析度小於 500px 時，帶有 max-width: 500px; 的容器以及放在容器裡的 ，會跟著容器的寬度自適應縮小，如下↓：

▍➌max-width 和 width 的差異：

max-width 會迎合外層容器，若在 .container 設置 max-width: 1200px;，則 .container 最大寬度為 1200px，不會因為拉大視窗使 .container 超出 1200px，而當視窗縮小時，.container 則跟著父層容器自適應縮小。

相反的，width 不能自適應，鎖死寬度的情況下，當縮小視窗時就會出現 x 軸。
（ x軸 = 捲軸 Scrollbar ）

▍➍ min-width 屬性

CSS min-width Property

min-width 用來設定元素的最小寬度，當一個容器被設為 min-width: 1000px; 時，容器以及放在容器裡的  文字段落將被限制在這個最小寬度裡。

而當瀏覽視窗伸縮至小於解析度 1000px 時，帶有 min-width: 1000px; 的容器仍維持它的最小寬度，而瀏覽器則產生捲軸 Scrollbar。

▍@media (max-width: 992px){...}

● 螢幕解析度 ≤ 992px

@media (max-width: 992px){...} 表示當螢幕解析度 ≤ 992px 的時候（螢幕解析度小於 992px、等於 992px 的時候），載入這一段語法 → .container{ color: red;} ，而原本的 .container{ color: #000;} 就被覆蓋掉了，文字顏色則從黑色變成紅色。

● 螢幕解析度 ≤ 768px

@media (max-width: 768px){...} 表示當螢幕解析度 ≤ 768px 的時候（螢幕解析度小於 768px、等於 768px 的時候），載入這一段語法 → .container{ color: green;} ，而原本的 .container{ color: red;} 就被覆蓋掉了，文字顏色則從紅色變成綠色。

▍@media (min-width: 992px){...}

● 螢幕解析度 ≥ 992px

@media (min-width: 992px){...} 表示當螢幕解析度 ≥ 992px 的時候（螢幕解析度大於 992px、等於 992px 的時候），載入這一段語法 → .container{ color: blue;} ，而原本的 .container{ color: #000;} 就被覆蓋掉了，文字顏色則從黑色變成藍色，而當螢幕解析度小於 992px 的時候，文字顏色才變回黑色。

小結

我經常會把 max-width、min-width 記錯，現在要再三刻在腦海裡🔨🔨：

max-width 用來設定元素的最大寬度。
min-width 用來設定元素的最小寬度。
@media (max-width: 992px){...} 當螢幕解析度 ≤ 992px 的時候載入語法。
@media (min-width: 992px){...} 當螢幕解析度 ≥ 992px 的時候載入語法。

本篇也是給自己的認識與釐清，如有錯誤請務必告訴我，感激不盡！

Practice make perfect，我是正在自我習作中的 Draw，我們下篇見 🙇🏻