方格精選

【自學CSS】min-width、max-width 到底怎麼用?響應式網頁應用解析

更新於 發佈於 閱讀時間約 10 分鐘

相信大家在一開始接觸 CSS 時,一定會很疑惑為什麼除了 width 外,還會有 max-width min-width 語法呢?當要開發響應式網頁時,到底要使用什麼語法來控制「斷點」?

先前我曾經分享過一篇文章聊聊關於響應式設計的淵源,及為什麼會有 Desktop FirstMobile First 的概念出現:

除了要講解基本的 max-width 與 min-width 用法外,這個兩個語法的使用情境,也會跟你使用怎麼樣的設計模式來開發響應式網站有關,首先讓我們來先了解 max-width 與 min-width 基礎的用法吧!



max-width、min-width 與 width

在學習 max-width、min-width 與 width 之間的差異時,我會建議請確保自己夠瞭解所謂「容器」的概念。

一般我們在控制網頁元素的大小時,我們很習慣的使用 width 作為單位,舉例來說,我們希望網頁上的圖片的寬度會跟著容器改變,並且一直是佔滿容器的狀態,於是就有了這樣的程式碼:

raw-image
  • 注:這裡並不鼓勵大家使用 inline CSS ,只是單純方便示範。

但這樣會造成一個問題,假設我今天沒有設定容器的寬度,只要我換到更大的螢幕,圖片也會跟著容器無上限的放大,進而造成模糊的問題。

為了解決這樣的問題,我們可以使用一個語法來解決那就是:max-width。

raw-image

max-width 與 width 語法最大的不同就是,一旦外層的容器開始縮放,帶有 max-width 語法的元素會有一個最大值最大就會是我們所設定的尺寸(500px),即便容器大於 500px ,圖片也不會跟著放大,而是保持自己的「最大寬度」

但是當容器縮小時,譬如說縮小至 500px 以下,帶有 max-width 語法的圖片會很神奇的自適應容器!

那 min-width 又是怎麼一回事呢?假設我們有這樣程式碼:


raw-image

帶有 min-width 的圖片會保有「最小寬度」,即便容器的寬度小於圖片,譬如容器為 400px,圖片還是不會自適應縮小至 400px,而是會超出容器,但有趣的是容器如果放大,那帶有 min-width 屬性的圖片也會跟著放大自容器寬度。

簡單來說,max-width 可以確保「最大寬度」,並在容器縮小後自適應容器大小;而 min-width 則是確保「最小寬度」,當容器放大時,會跟著自適應放大的容器大小。

因此我們就可以依照網頁的需求,來選擇要使用 max-width、min-width 還是 width。

這裡補個小知識點,除了常見的 px、em、rem、%等網頁元素的單位,我們還可以在這三個語法中加入以下值:

raw-image



CSS3 Media Query 開發響應式網站

接著我們要了解響應式設計是如何實作的,我們又是如何做到讓網頁可以隨著視窗變動時,可以讓網頁中的內容可以依照網頁大小縮放,甚至是改變版型?

這之中沒有什麼魔法,凡是畫面上會依比例縮放、換背景、換行、樣式改變等不一樣的網頁效果,基本上都是要透過人為的設計及修改。

之前曾被讀者問到,要怎麼樣透過自動化的方式,只設定一個版型,然後一直持續的使用下去。

說實話,這有點難,畢竟第一個問題是:畫面設計不是工程師設計的,是設計師,你沒有辦法控制設計師設計出完全符合畫面邏輯的東西。

第二個問題是,網頁的使用者體驗與手機的使用者體驗完全是天差地別的一件事,如果想要讓兩種完全不一樣的載具共用一個設計,那代表這個產品還有很多可以優化的地方。

於是,我們就會需要一個語法來做到當我們在不同的視窗大小時,內容會有相應的改變,而這個語法就是 Media query:

raw-image

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 語法來限制,又或者說控制我們的網頁樣式:

raw-image

由上方的範例中,我們限制帶有 .contaienr 的元素大小最大最大就是 1110px 了,如果網頁大小超過了 1140px 的話,也不會跟著放大,帶有 .container 類別的網頁元素也不會超過 1110px。

那如果網頁大小小於 1140px 呢?此時 max-width 語法就發揮作用了!

還記得我們先前提到什麼嗎?帶有 max-width 語法的樣式,在小於特定斷點的時候,也會跟著自適應。

千萬要記得,如果你想要網頁中的內容都可以在視窗縮小時自適應的話,那就一定要使用 max-width 來規範寬度,不然使用 width 來設定寬度的話,就會變成工程師們常說的「寫死寬度了」。

接著我們要怎麼樣做出一個簡單的響應式網站,我們如果不採用任何設計模式,只使用純 SASS 來開發的話,程式碼結構可能就會長這樣:


raw-image


請記得斷點一定要由上往下撰寫,這不是什麼業內規定,而是 CSS 有所謂的 CSS Flow,CSS 這個程式語言的特性就是讀取的順序是由上往下讀取,如果你把手機的樣式寫在桌機的樣式上面的話,就會發現你一開始就只會獲得手機的樣式,而不是桌機的樣式。

這也可以被理解成,下方的 CSS 設定會覆蓋掉上面的,一旦你把條件最寬廣的設定寫在最下方,這意味著上方的條件會被覆蓋過去,那上方的條件不就是寫心酸的嗎?


raw-image


以上方的範例來說,最後我們都只會獲得桌機的樣式,而不是你所預期的手機樣式。

  • max-width 用法補充:

你可能會看到許多開發者在定義圖片時,會出現以下程式碼,作用就是要確保所有的圖片可以依照容器自適應縮放:

raw-image




min-width 與手機優先的設計模型

最後我們來聊聊一般人最容易搞混的 min-width 的,你可以把它想像成:當網頁「大於」某個斷點時,min-width 中的樣式才會生效。

一般來說,我們會在「Mobile First 」的概念下使用 min-width 的語法來進行響應式的開發,但請注意,請維持 CSS 由上而下的撰寫脈絡,把最寬的條件寫在上方,較嚴謹的條件寫在下方。

我們稍微把之前響應式的模板用 min-width 修改一下,如果要使用這個語法來撰寫響應式網站的話,語法可能會長這樣:

raw-image

有沒有發現完全跟 max-width 的撰寫邏輯相反過來了?使用 min-width 來開發網頁時,會發現我們的預設樣式由桌機變成手機了!這也是為什麼我們前面所提到,min-width 是用來開發「Mobile」版型的語法。

這裡再三強調,不論你用什麼樣的方式撰寫響應式的邏輯一律都是:由上至下從寬鬆寫到嚴謹,讓我們再來看個錯誤示範:


raw-image


有沒有發現哪裡不對勁的呢?

沒錯,此時不論你用什麼載具打開這個網頁,一定都是只有手機版的樣式,同樣的重點我再說一次:CSS flow 很重要,下方的樣式會覆寫掉前面的。

因此開發響應式網站的時候,一定要非常注意所謂的 CSS Flow 及你自己的程式碼有沒有不小心覆蓋其他樣式的問題。


相信透過這篇文章,大家可以更加了解 max-width、min-width 及 width 的使用差異,關於響應式你有沒有什麼問題想要跟我分享的呢?歡迎你在下方留言與我分享。

希望今天的文章有幫助到正在閱讀的你,如果你喜歡我的文章的話,可以留下你的愛心或是收藏我的文章,也或者可以點選「贊助」,你的一杯咖啡絕對是我持續寫下去的動力!或是透過拍拍手,用你小小的行動支持我的創作!

我是Vivian,我們下次見。



關於我:

一名從英文系畢業的前端工程師,喜歡閱讀、寫東西及自我成長。

|Instagram: Vivian Yeh|vivian_enlife

|聯絡我:vivian.enlife@gmail.com


在此感謝高雄火箭隊培訓營的第七梯、第八梯隊友協助勘誤。
留言
avatar-img
留言分享你的想法!
avatar-img
Vivian Yeh - 跨領域轉職的軟體工程師
444會員
103內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
2023/06/07
說到 HTML 元素的換行效果,在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行 ⋯⋯
Thumbnail
2023/06/07
說到 HTML 元素的換行效果,在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行 ⋯⋯
Thumbnail
2022/04/28
在 Modern Web 的世界中,已經有非常多的套件、語法、框架,可以解決大部分網頁排版問題。 以我近期的觀察來說,在專案開發時,大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構,而採取原生的 CSS 寫法,而不是仰賴快速又方便的套件。
Thumbnail
2022/04/28
在 Modern Web 的世界中,已經有非常多的套件、語法、框架,可以解決大部分網頁排版問題。 以我近期的觀察來說,在專案開發時,大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構,而採取原生的 CSS 寫法,而不是仰賴快速又方便的套件。
Thumbnail
2022/03/23
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
2022/03/23
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
box-sizing 是 CSS 屬性的一種,它使我們可以改變盒模型的計算方式。
Thumbnail
box-sizing 是 CSS 屬性的一種,它使我們可以改變盒模型的計算方式。
Thumbnail
本篇習作加強自我對 CSS Box Model 的觀念,也是在實作練習中發現自己雖然看似理解了盒模型,但其實在應用上尚不熟悉,因此藉由筆記重新梳理和練習,將 CSS Box Model 的基礎觀念整理並釐清,一起來看看吧!
Thumbnail
本篇習作加強自我對 CSS Box Model 的觀念,也是在實作練習中發現自己雖然看似理解了盒模型,但其實在應用上尚不熟悉,因此藉由筆記重新梳理和練習,將 CSS Box Model 的基礎觀念整理並釐清,一起來看看吧!
Thumbnail
在 Modern Web 的世界中,已經有非常多的套件、語法、框架,可以解決大部分網頁排版問題。 以我近期的觀察來說,在專案開發時,大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構,而採取原生的 CSS 寫法,而不是仰賴快速又方便的套件。
Thumbnail
在 Modern Web 的世界中,已經有非常多的套件、語法、框架,可以解決大部分網頁排版問題。 以我近期的觀察來說,在專案開發時,大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構,而採取原生的 CSS 寫法,而不是仰賴快速又方便的套件。
Thumbnail
都市傳說:「網頁跑版時,設定 box-sizing: border-box一切搞定!」
Thumbnail
都市傳說:「網頁跑版時,設定 box-sizing: border-box一切搞定!」
Thumbnail
相信大家在一開始接觸 CSS 時,一定會很疑惑為什麼除了 width 外,還會有 max-width 及 min-width 語法呢? 當要開發響應式網頁時,到底要使用什麼語法來控制「斷點」?
Thumbnail
相信大家在一開始接觸 CSS 時,一定會很疑惑為什麼除了 width 外,還會有 max-width 及 min-width 語法呢? 當要開發響應式網頁時,到底要使用什麼語法來控制「斷點」?
Thumbnail
對於前端初學者來說,在切版時會出現很多規則、不規則的網頁區塊,這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
Thumbnail
對於前端初學者來說,在切版時會出現很多規則、不規則的網頁區塊,這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
Thumbnail
明明想要某個欄位的寬高為 200px,卻發現自己不知道為什麼怎麼更改都會改不動,又或者寬高更改了,卻沒有辦法與其他元素並列。 上述的狀況,通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
Thumbnail
明明想要某個欄位的寬高為 200px,卻發現自己不知道為什麼怎麼更改都會改不動,又或者寬高更改了,卻沒有辦法與其他元素並列。 上述的狀況,通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
Thumbnail
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
Thumbnail
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
Flexbox長於小規模佈局,而Grid layout則適於大規模佈局。 Flexbox是單向度的排版,Grid則是包含X軸和Y軸的平面排版方式。 如果你想要簡單輕便的實現單一軸向的自適應式排版,例如導覽列、卡片式排版、相簿等,可以選擇使用Flexbox。如果你想快速實現雙軸平面式,甚至不規則的排版
Thumbnail
Flexbox長於小規模佈局,而Grid layout則適於大規模佈局。 Flexbox是單向度的排版,Grid則是包含X軸和Y軸的平面排版方式。 如果你想要簡單輕便的實現單一軸向的自適應式排版,例如導覽列、卡片式排版、相簿等,可以選擇使用Flexbox。如果你想快速實現雙軸平面式,甚至不規則的排版
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News