Media Queries & Flexible Media Demo

實時視口偵測 (Viewport Monitor)

當前瀏覽器寬度

0 px

Desktop Layout

        Active CSS Rule:

        .layout-container { flex-direction: row; }

觀察上方圖片，它的 CSS 設置了 max-width: 100%; height: auto;。這保證了它永遠不會撐破這張白色的卡片，並且保持完美的長寬比。

當您將瀏覽器寬度縮小到 768px 以下時，@media 查詢將會觸發。父容器的佈局將從橫向 (row) 瞬間轉變為直向 (column)。

透過彈性媒體與媒體查詢的結合，我們只需要編寫一份 HTML 代碼，就能讓 SE112 的期末專案在手機和電腦上都擁有完美的閱讀體驗。