先看這個例子
規則是 min-width:600px。預設一欄，到達臨界點便轉兩欄；剛好 600px 也包括在內。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 邊界以下 | 視窗 599 | 條件不成立；一欄 |
| 剛好邊界 | 視窗 600 | 條件成立；兩欄 |
| 邊界以上 | 視窗 601 | 條件成立；兩欄 |
瀏覽器怎樣處理
min-width 包括等於所寫 CSS 像素值的情況。設備實體像素和截圖解像度不是同一量度。本課核對的是精確條件，與保留內容次序、或按元件容器判斷是不同工作。
差一像素，普通兩張截圖可能看不出
反例把臨界點改成 601px。只試 390px 和 960px，結果仍看似合理。
<style>body{margin:8px}</style>
<style>.view{display:grid;grid-template-columns:1fr}@media(min-width:601px){.view{grid-template-columns:1fr 1fr}}</style><section class="view"><p>原始檔</p><p>預覽</p></section>剛好 600px 時，反例仍是一欄，未符合原訂規則。
試着修正
只試 390px 和 960px，分得出 min-width 600 與 min-width 601 嗎？
查看參考答案
分不出。兩條條件在 390 都不成立，在 960 都成立；須試剛好 600px。
- 在 599／600／601 記錄 matchMedia 及 grid 實際位置。
- 測試環境用 CSS 像素作單位。