根據 Statcounter 對 150 萬個網站所做的統計，在 2025 年中使用不同裝置上網所佔的比例為：手機 58.39%、桌機 40.04%、平板 1.57%。
從 2009 年接近 100% 的桌機瀏覽比例，隨著手機的普及，到 2016 之後兩著的比例就已經趨於相同，而後用手機上網的數量在這 5 年又緩慢成長，至今已經是桌機上網比例的 1.5 倍左右了。
*Statcounter Global Stats 統計數據（2009-01 - 2025-07）
因此在我們想要刻出一個部落格的時候，同時提供桌機和手機版的介面就是不得不考慮的重要設計了！
在以往都是透過桌機來上網的時代中，要設計一個頁面需要考慮的因素並不會太複雜，只要固定寬高即可。既然容器寬高不變，在容器裡面的所有元素也都可以固定大小。
什麼，你說瀏覽器的視窗大小是可以改變的？沒關係，我們在網站中提示用戶「建議最佳瀏覽 800x600 解析度」即可，畢竟大家只有桌機、筆電能夠使用。
*舊時代網站範例，Internet Archive on 2007 - 經濟部標準檢驗局
但是到了現在，由於桌機和手機的螢幕尺寸差距極大，對於固定寬高的設計邏輯就難以在延續下去，特別是我們無法像在電腦上調整手機內的視窗大小，並且針對桌機和手機分別開發網站又會增加成本。
因此，在智慧型手機出現的幾年內，就相繼有針對不同尺寸螢幕要怎麼處理的討論，相關網站介面的技術和概念也在這個時候產生出來。
首先是 Apple 開始在 Safari 中提供 viewport 使得網站能控制視窗寬度和縮放，再來的 2010 年所謂的 RWD 被 Ethan Marcotte 正式提出：引入了 Fluid grid（流體網格）、Flexible images（彈性圖片）和 Media Query（媒體查詢）這些概念。
而後的一兩年根據 RWD 開發的框架便開始大行其道（如 Bootstrap），越來越多人透過手機上網，也因此 Mobile-First（行動優先）的設計思想也逐漸被大家開始考量。
那麼，RWD 究竟是要設計什麼呢？
前面一直提到的 RWD 是 Responsive Web Design 的縮寫，其中 Responsive 的中文通常可以翻譯成響應式，旨在「響應」各種不同的螢幕大小，小到手機、平板，大到不同尺寸的桌機螢幕。
RWD 並不是實作的方法，而是一套指導網頁適應不同尺寸視窗的方法論，讓版面、字體和媒體可以依照其可用空間自行響應，而不是為特定裝置客製。
我們可以根據 RWD 的概念提出不同方式的實作，舉例來說，要如何響應不同的螢幕尺寸來調整內容物？且讓我們看看以下範例。
在 RWD 概念中的 Fluid Grid（流體網格），說的就是定義一個如圖下中的網格系統。我們可以將螢幕的水平方向切分成數個 Columns，例如 12 個。
整個網格系統會根據視窗的寬度 Viewport Width（1）自動縮放 Column（4），縮放的過程也能夠指定 Gutter（5）的寬度。
*網格系統 Grid System
我們設定內容器的最大寬度（3）為 1280px，意味著在小於 1280 的視窗中，columns 會依照比例縮小，附著在上面的內容物也會跟著 columns 一同縮小。
而在大於 1280px 的視窗中則會在寬度拉長到 1280px 時就停止，隨著寬度繼續增長，內容器 margin（2）也會隨之增長，也就能避免內容物無限變寬導致視覺上不好看。
*附著物件至網格，設定內容物最大寬度
有了網格系統，我們就能將想要放置的內容黏著網格，這樣在不同大小的視窗中就不必特別考慮內容寬度了，只要關注佔據 columns 的數量即可，當視窗小於最大寬度時，便會觸發所有的內容物一同縮放。
接下來的問題就是當螢幕過小時，若是等比例縮放，勢必還是會導致內容物被壓縮得過小而看不清楚。為了要解決這個問題，就可以用到 RWD 中的另一個概念：Media Query。
所謂 Media Query（媒體查詢） 這個概念是指：讓 CSS 有能力判斷「什麼環境下套用什麼樣式」。
Media Query 的概念在初次理解時其實會讓人有點混淆，之所以這樣命名，是因為目的是能讓瀏覽器來查詢當前媒體環境，以便獲取視窗寬度、裝置類型等資訊，來決定要套用什麼樣式。
且看一小段 CSS：
.box { background: green; }
@media (min-width: 768px) {
.box { background: blue; }
}
@media (min-width: 1280px) {
.box { background: red; }
}
這段 CSS 表達的是在視窗寬度 1280px 以上將 Box 顯示成紅色、介於 768px 至 1280px 間顯示藍色，小於 768px 顯示綠色。
在 CSS 中 @ 開頭的關鍵字稱作 at-rules，表示一種特殊的規則；而 @media 也就是 media query 的at-rule，並非一般的 CSS class 或是屬性，而是用來根據媒體的環境來套用樣式。
什麼是媒體的環境呢？像是 @media screen 和 @media print 表示針對螢幕（screen）及列印（print）的類型。例如用戶要列印網頁時，當前的環境就符合 @media print，我們便能針對當前環境做一些樣式設定，像是把按鈕隱藏起來（因為把按鈕列印出來可能沒什麼用處）。
而 @media (min-width: 1280px) 則是針對媒體特徵（此例為 viewport 寬度）所做的查詢，代表 viewport 在 1280px 以上的條件，我們俗稱 1280px 這個數值稱為斷點（Breakpoint）。
就以 Tailwind CSS 為例，其定義的 breakpoints 包含 640px、768px、1024px、1280px、1536px。
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
sm |
40rem (640px) | @media (min-width: 40rem) { ... } |
md |
48rem (768px) | @media (min-width: 40rem) { ... } |
lg |
64rem (1024px) | @media (min-width: 40rem) { ... } |
xl |
80rem (1280px) | @media (min-width: 40rem) { ... } |
2xl |
96rem (1536px) | @media (min-width: 40rem) { ... } |
*Tailwind 的 Breakoints
透過 media query，我們就可以得知 viewport 當前寬度，來指定不同 breakpoint 下要設定什麼樣式，藉此達成僅開發一套頁面，但能同時給多種螢幕大小的裝置使用這個目的。
有了網格系統、斷點定義，就能夠對不同大小的視窗設計合適的版面佈局了。
由於手機和桌機尺寸的設備幾乎佔據全部的使用量，我們可以針對性的對這兩種大小的設備來做設計：由於桌機的螢幕較大，可以加上 sidebar、塞入更多元素，做的 Fancy 一些；而螢幕較小的手機則需要簡化，讓資訊量別過多而擠滿螢幕。
和前面所說的例子一樣，我們可以定義 12 columns 的系統，包含主要內容的最大寬度：1280px，超過則內容置中、左右留白。
再來是視窗尺寸從桌機縮小至手機的策略：透過定義內部元件的 column span（跨欄數）來達成。由於我們定義的 columns 為 12 欄，每個元件可以佔據的欄位就從 1-12 選擇。
下圖中，左邊為視窗寬度 768px（平板以上）會呈現的樣子、右邊則為寬度 390px（手機）呈現的樣子。
我們可以參照 Tailwind 所定義的 breakpoints 來進行設計，例如挑選常見的平板寬度 768px（md, medium size）作為斷點，任何 ≥768px 的視窗寬度都看 md:col-span-? 的跨欄數。
就下圖的元件 2 來說，在平板尺寸以上僅佔 6 格跨欄數，因此可以設定成 md:col-span-6。
*平板、手機尺寸頁面示例
由於常見的斷點是透過 min-width 來達成，如果我們僅僅設定 md:col-span-6 的話，就只有 ≥ 768px（最小寬度為 768px 時）的形況可以適用此樣式，因此一定要設定一個無前綴預設值 col-span-? 讓 < 768px 寬度的視窗（像是此例中的手機）有樣式能參照。
回到元件 2，其跨欄數在 md 和預設值的設定分別為 md:col-span-6 及 col-span-12，造成的結果就是 768px 的兩端分別會佔據 6 欄和滿版的 12 欄。
上述為 Tailwind 的寫法，如果寫成純粹的 CSS 長得就會像是：
@media (min-width: 768px) { grid-column: span 6; }
{ grid-column: span 12; }
這裡 grid-column: span 6 代表佔據 6 個欄，手機則參照 span 12 表示佔滿全部 12 欄。
在比較寬的視窗中，我們可以在同一列堆疊多一些元件，隨著視窗逐漸縮小，就把同一列的元件「擠」下去，最終到了手機視窗的大小，就能保持不過度擁擠的一列一個元件。
*桌機及手機頁面示例
上圖就是一個範例，在 1440px 和 390px 視窗下，一個部落格所呈現的不同面貌。藉由 RWD 概念的實作，就能寫只維護一份 HTML + CSS，卻能適應多種尺寸裝置來瀏覽。
iThome鐵人賽
看影片追技術