方格精選
【自學CSS】min-width、max-width 到底怎麼用？響應式網頁應用解析
相信大家在一開始接觸 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
｜聯絡我：vivian.enlife@gmail.com
在此感謝高雄火箭隊培訓營的第七梯、第八梯隊友協助勘誤。
此篇文章會顯示動態置底廣告
為什麼會看到廣告
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在網上，自學泰語的朋友可以找到許多免費且豐富的學習資源。以下整理了一些實用的泰語教學和全泰語Podcast，幫助你高效、持續地提升泰語能力。
本文主要使用Google Gemini 1.5 Flash 免費版，詢問日語的詞語解釋、文法分析、句型比較以及產出對話。
進入第三課，
必須在畫面中一次擺入多顆球體，
我才發現我的空間感極差，
前前後後修改了很多次，
總是畫不出遠近、立體的感覺，
最後嘗試盡量「壓扁」自己的畫畫空間，
不讓畫筆往上延伸，而是往左右展開，
才比較能畫出遠近的感覺。
（希望大家看了會覺得球體是遠近擺設的
，而不是只有上下的
雖然立志要跟著書本每天畫畫，
但現實生活還是非常難達成這個目標。
上星期無故接連失眠了三天，
最後一天甚至是徹夜未眠，
只好撥空去看中醫了。
中醫師說可能是因為長期腸胃的不舒服（胃食道逆流加上脹氣），
造成睡眠品質不好（容易作夢、淺眠），
再加上生活上煩心的事，
累積下來就會
在荷蘭居連續住滿五年，就可以申請永久居留或是荷蘭公民，而其中一項重要的條件就是要考過融入考試。而荷蘭融入考試總共有六個科目，分別是荷蘭文 A2 程度的聽力、口說、閱讀、寫作、荷蘭就業市場準備和荷蘭社會文化常識。
想要自學 HTML 嗎？HTML 是一個相對簡單的標記語言，適合初學者。透過免費資源和互動平臺，你可以輕鬆地學習 HTML，並逐步提高技能。除了 HTML，你還可以瞭解免費網頁設計軟體，如 VS Code 和 Sublime Text。加油吧！
6 篇文章｜7003 字
學習觀｜教育心理學｜自我教育方法
本書用輕鬆對話的方式，談論以下主題。
目錄
一章：自學的基礎
01 自學的重要性和好處：介紹自學對個人發展的好處，包括彈性學習時間、個性化學習路徑等，幫助您理解自學對於生涯發展的長遠影響
02 確定學習目
本文用輕鬆對話的方式，探討如何來保持學習的積極性和高效性，包括設定里程碑、使用回饋和應對挫折的方法。
保持學習的持續性和效率
『嘿，大家好，今天我們要談的是「保持學習的持續性和效率」，這可是一個挺重要的話題哦！設定清晰且有意義的目標非常關鍵。比如說，你想在一年內學習一門新語言，或者獲得專
本文用輕鬆對話的方式，討論常見的學習障礙，比如時間管理困難、資訊過載和學習疲勞等，提供實用的方法來克服這些問題。
解決學習過程中的挑戰
『大家好，我是波士，今天要和小瑜一起聊聊學習過程中常見的挑戰和解決方法。』
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在網上，自學泰語的朋友可以找到許多免費且豐富的學習資源。以下整理了一些實用的泰語教學和全泰語Podcast，幫助你高效、持續地提升泰語能力。
本文主要使用Google Gemini 1.5 Flash 免費版，詢問日語的詞語解釋、文法分析、句型比較以及產出對話。
進入第三課，
必須在畫面中一次擺入多顆球體，
我才發現我的空間感極差，
前前後後修改了很多次，
總是畫不出遠近、立體的感覺，
最後嘗試盡量「壓扁」自己的畫畫空間，
不讓畫筆往上延伸，而是往左右展開，
才比較能畫出遠近的感覺。
（希望大家看了會覺得球體是遠近擺設的
，而不是只有上下的
雖然立志要跟著書本每天畫畫，
但現實生活還是非常難達成這個目標。
上星期無故接連失眠了三天，
最後一天甚至是徹夜未眠，
只好撥空去看中醫了。
中醫師說可能是因為長期腸胃的不舒服（胃食道逆流加上脹氣），
造成睡眠品質不好（容易作夢、淺眠），
再加上生活上煩心的事，
累積下來就會
在荷蘭居連續住滿五年，就可以申請永久居留或是荷蘭公民，而其中一項重要的條件就是要考過融入考試。而荷蘭融入考試總共有六個科目，分別是荷蘭文 A2 程度的聽力、口說、閱讀、寫作、荷蘭就業市場準備和荷蘭社會文化常識。
想要自學 HTML 嗎？HTML 是一個相對簡單的標記語言，適合初學者。透過免費資源和互動平臺，你可以輕鬆地學習 HTML，並逐步提高技能。除了 HTML，你還可以瞭解免費網頁設計軟體，如 VS Code 和 Sublime Text。加油吧！
6 篇文章｜7003 字
學習觀｜教育心理學｜自我教育方法
本書用輕鬆對話的方式，談論以下主題。
目錄
一章：自學的基礎
01 自學的重要性和好處：介紹自學對個人發展的好處，包括彈性學習時間、個性化學習路徑等，幫助您理解自學對於生涯發展的長遠影響
02 確定學習目
本文用輕鬆對話的方式，探討如何來保持學習的積極性和高效性，包括設定里程碑、使用回饋和應對挫折的方法。
保持學習的持續性和效率
『嘿，大家好，今天我們要談的是「保持學習的持續性和效率」，這可是一個挺重要的話題哦！設定清晰且有意義的目標非常關鍵。比如說，你想在一年內學習一門新語言，或者獲得專
本文用輕鬆對話的方式，討論常見的學習障礙，比如時間管理困難、資訊過載和學習疲勞等，提供實用的方法來克服這些問題。
解決學習過程中的挑戰
『大家好，我是波士，今天要和小瑜一起聊聊學習過程中常見的挑戰和解決方法。』