編輯嚴選【自學CSS】min-width、max-width 到底怎麼用？響應式網頁應用解析
編輯嚴選
2021/11/14閱讀時間約 9 分鐘
相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？
先前我曾經分享過一篇文章聊聊關於響應式設計的淵源，及為什麼會有 Desktop First 及 Mobile First 的概念出現：
除了要講解基本的 max-width 與 min-width 用法外，這個兩個語法的使用情境，也會跟你使用怎麼樣的設計模式來開發響應式網站有關，首先讓我們來先了解 max-width 與 min-width 基礎的用法吧！
max-width、min-width 與 width
在學習 max-width、min-width 與 width 之間的差異時，我會建議請確保自己夠瞭解所謂「容器」的概念。
一般我們在控制網頁元素的大小時，我們很習慣的使用 width 作為單位，舉例來說，我們希望網頁上的圖片的寬度會跟著容器改變，並且一直是佔滿容器的狀態，於是就有了這樣的程式碼：
- 注：這裡並不鼓勵大家使用 inline CSS ，只是單純方便示範。
但這樣會造成一個問題，假設我今天沒有設定容器的寬度，只要我換到更大的螢幕，圖片也會跟著容器無上限的放大，進而造成模糊的問題。
為了解決這樣的問題，我們可以使用一個語法來解決那就是：max-width。
max-width 與 width 語法最大的不同就是，一旦外層的容器開始縮放，帶有 max-width 語法的元素會有一個最大值，最大就會是我們所設定的尺寸（500px），即便容器大於 500px ，圖片也不會跟著放大，而是保持自己的「最大寬度」。
但是當容器縮小時，譬如說縮小至 500px 以下，帶有 max-width 語法的圖片會很神奇的自適應容器！
那 min-width 又是怎麼一回事呢？假設我們有這樣程式碼：
帶有 min-width 的圖片會保有「最小寬度」，即便容器的寬度小於圖片，譬如容器為 400px，圖片還是不會自適應縮小至 400px，而是會超出容器，但有趣的是容器如果放大，那帶有 min-width 屬性的圖片也會跟著放大自容器寬度。
簡單來說，max-width 可以確保「最大寬度」，並在容器縮小後自適應容器大小；而 min-width 則是確保「最小寬度」，當容器放大時，會跟著自適應放大的容器大小。
因此我們就可以依照網頁的需求，來選擇要使用 max-width、min-width 還是 width。
這裡補個小知識點，除了常見的 px、em、rem、%等網頁元素的單位，我們還可以在這三個語法中加入以下值：
CSS3 Media Query 開發響應式網站
接著我們要了解響應式設計是如何實作的，我們又是如何做到讓網頁可以隨著視窗變動時，可以讓網頁中的內容可以依照網頁大小縮放，甚至是改變版型？
這之中沒有什麼魔法，凡是畫面上會依比例縮放、換背景、換行、樣式改變等不一樣的網頁效果，基本上都是要透過人為的設計及修改。
之前曾被讀者問到，要怎麼樣透過自動化的方式，只設定一個版型，然後一直持續的使用下去。
說實話，這有點難，畢竟第一個問題是：畫面設計不是工程師設計的，是設計師，你沒有辦法控制設計師設計出完全符合畫面邏輯的東西。
第二個問題是，網頁的使用者體驗與手機的使用者體驗完全是天差地別的一件事，如果想要讓兩種完全不一樣的載具共用一個設計，那代表這個產品還有很多可以優化的地方。
於是，我們就會需要一個語法來做到當我們在不同的視窗大小時，內容會有相應的改變，而這個語法就是 Media query：
media query 語法首先會由一個 @ 符號加上 media 關鍵字，並且會接續的小括號中，搭配 max-width 與 min-width 語法與相對應的斷點，並透過在接續的大括號中加入在特定斷點中相對應的樣式。
那什麼又是斷點（ breakpoints ）呢？
簡單來說，斷點就是當網頁視窗縮放到一定大小時，你的網頁樣式就要跟著縮放、改變樣式，決定樣式是否要改變的數字，就是我們常說的斷點。
以上述的程式碼範例來說：當網頁大於 768px 時，我的導覽列的大小也要跟著變大。
那麼 768px 就會是一個斷點，通常在做網頁設計時，會有一系列大家慣用的斷點（常見的載具比例），所以也不需要擔心要自己一一測試不同載具在哪個尺寸需要改變樣式。
接著我們就來看看，究竟開發響應式網站時，要使用 max-width 還是 min-width 吧。
max-width 與電腦優先的設計模型
在前面有提到，要選用 max-width 或是 min-width 來設計斷點，取決於你想要要什麼要的設計模型來開發網站，這裡我們就先來聊聊如果我們以電腦為優先的話，會怎麼樣設計我們的斷點。
試想使用者的使用情境：小明有時候會用 27 吋的大螢幕作為第二個螢幕觀看網站，但同時使用 13 吋的 MacBook 來作為第一個螢幕。
這時候就會有個問題發生了，難道我們的螢幕越大，網頁也要跟著變大嗎？然而人的視野是有限的，你往往會發現如果網頁跟著螢幕的大小一直向外延展，那對於常使用電腦觀看網頁的人是不是很不方便？
於是我們就可以使用 max-width 語法來限制，又或者說控制我們的網頁樣式：
由上方的範例中，我們限制帶有 .contaienr 的元素大小最大最大就是 1110px 了，如果網頁大小超過了 1140px 的話，也不會跟著放大，帶有 .container 類別的網頁元素也不會超過 1110px。
那如果網頁大小小於 1140px 呢？此時 max-width 語法就發揮作用了！
還記得我們先前提到什麼嗎？帶有 max-width 語法的樣式，在小於特定斷點的時候，也會跟著自適應。
千萬要記得，如果你想要網頁中的內容都可以在視窗縮小時自適應的話，那就一定要使用 max-width 來規範寬度，不然使用 width 來設定寬度的話，就會變成工程師們常說的「寫死寬度了」。
接著我們要怎麼樣做出一個簡單的響應式網站，我們如果不採用任何設計模式，只使用純 SASS 來開發的話，程式碼結構可能就會長這樣：
請記得斷點一定要由上往下撰寫，這不是什麼業內規定，而是 CSS 有所謂的 CSS Flow，CSS 這個程式語言的特性就是讀取的順序是由上往下讀取，如果你把手機的樣式寫在桌機的樣式上面的話，就會發現你一開始就只會獲得手機的樣式，而不是桌機的樣式。
這也可以被理解成，下方的 CSS 設定會覆蓋掉上面的，一旦你把條件最寬廣的設定寫在最下方，這意味著上方的條件會被覆蓋過去，那上方的條件不就是寫心酸的嗎？
以上方的範例來說，最後我們都只會獲得桌機的樣式，而不是你所預期的手機樣式。
- max-width 用法補充：
你可能會看到許多開發者在定義圖片時，會出現以下程式碼，作用就是要確保所有的圖片可以依照容器自適應縮放：
min-width 與手機優先的設計模型
最後我們來聊聊一般人最容易搞混的 min-width 的，你可以把它想像成：當網頁「大於」某個斷點時，min-width 中的樣式才會生效。
一般來說，我們會在「Mobile First 」的概念下使用 min-width 的語法來進行響應式的開發，但請注意，請維持 CSS 由上而下的撰寫脈絡，把最寬的條件寫在上方，較嚴謹的條件寫在下方。
我們稍微把之前響應式的模板用 min-width 修改一下，如果要使用這個語法來撰寫響應式網站的話，語法可能會長這樣：
有沒有發現完全跟 max-width 的撰寫邏輯相反過來了？使用 min-width 來開發網頁時，會發現我們的預設樣式由桌機變成手機了！這也是為什麼我們前面所提到，min-width 是用來開發「Mobile」版型的語法。
這裡再三強調，不論你用什麼樣的方式撰寫響應式的邏輯一律都是：由上至下從寬鬆寫到嚴謹，讓我們再來看個錯誤示範：
有沒有發現哪裡不對勁的呢？
沒錯，此時不論你用什麼載具打開這個網頁，一定都是只有手機版的樣式，同樣的重點我再說一次：CSS flow 很重要，下方的樣式會覆寫掉前面的。
因此開發響應式網站的時候，一定要非常注意所謂的 CSS Flow 及你自己的程式碼有沒有不小心覆蓋其他樣式的問題。
相信透過這篇文章，大家可以更加了解 max-width、min-width 及 width 的使用差異，關於響應式你有沒有什麼問題想要跟我分享的呢？歡迎你在下方留言與我分享。
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：[email protected]
在此感謝高雄火箭隊培訓營的第七梯、第八梯隊友協助勘誤。
380會員
91內容數
留言0
查看全部
