網上關於響應式斷點設定的教程多基於「主流螢幕尺寸」，但其實不存在所謂「主流尺寸」。另一流派主張「佈局斷裂時設斷點」，聽起來合理，但如何判斷佈局是否斷裂？更科學的答案是：依據經典閱讀理論定義斷點。

權威理論支撐

Robert Bringhurst 指出：單欄頁面在標準襯線字體、常規字號下，每行 45–75 字符最佳。Josef Müller-Brockmann 則認為：每行容納 10 個單詞即易閱讀。這是基準理論，實際字符數受語言、字體、字號、行高、字間距、對比度等多因素影響。

從小螢幕開始逐漸放大，當主內容寬度超過 75 字符或 10 單詞，即需引入變化——這就是你的斷點。

作者製作的「國際尺寸滑動器」直觀展示：德語 Verdana 10 單詞寬 38.5em，英語 Georgia 10 單詞僅 22em，默認瀏覽器下相差 616px 對 352px。語言與字體僅兩因素，對網格系統影響巨大。

實戰演示：以簡單部落格文章為例

忽略 Header/Logo，聚焦內容區。無樣式時文章撐滿視窗，桌面端過寬難讀。加入基礎排版樣式與 max-width 後，單欄佈局即成響應式網格的起點：小螢幕微調，大螢幕可增欄位承載導航、側邊欄等。

三級斷點實戰代碼邏輯

小螢幕（手機）

結合 Oliver Reichenstein「視距決定字號」理論（手機視距近，字號宜小）與 Bringhurst「不小於 45 字符」原則。示例採用 16px Georgia 為基準，小螢幕減小字號、縮減內邊距，騰出更多閱讀空間。

大螢幕（桌面端雙欄）

內容導向型站點單欄足矣，但多欄在大螢幕可承載更多信息。示例在左側新增 33% 寬欄位承載標題與首段，其餘元素（引言、圖片）填充其中。當視窗寬度超過 34em（內容 30em + 邊距 4em），最大寬度設為 51em，文章佔 2/3，左欄佔 1/3，標題與首段通過負外邊距對齊左欄。

超大螢幕（三欄佈局）

文章佔 50%，左右邊距各 25%，腳註右偏 50% 且寬度為 50% - 2em。使用 calc() 配合瀏覽器前綴保證相容性。

技術方法論：Mobile First 與默認樣式優先

早期做法：先造 PC 站，再用媒體查詢覆蓋小螢幕樣式——這是反模式。正確路徑：從小螢幕（默認狀態）開始，向上增強。變大容易（樹生長、嬰兒長大），縮減困難（精簡汽車極難）。

優先默認樣式

首先確定的是「默認樣式」——無論螢幕大小通用的字號、留白、品牌風格（邊框、背景關係等）。這些不應放入媒體查詢。媒體查詢僅定義「例外」（如更小字號）或「補充」（如網格系統）。

例如：Header、導航等複雜元素在小螢幕常與默認狀態差異巨大，將其差異代碼置於針對小螢幕的媒體查詢中，符合「例外」邏輯。