響應式排版整合

響應式的核心是：視窗小時疊放，視窗大時並排；必要時 flex 與 grid 混用。 用 media query 設斷點，就能讓同一套 HTML 在桌機與手機都好讀。

Hero 區塊（手機疊、桌機並排）

混合 Grid + Flex 商品區

響應式 Footer

AI 協作：學了這個，跟 AI 怎麼配合？

響應式排版是把 Flexbox + Grid + Media Query 結合在一起。你決定斷點，AI 幫你寫 code。

你的人類優勢：

• 你知道你的用戶用什麼裝置（手機 vs 電腦的比例）
• 你能實際在不同尺寸的視窗裡測試效果

可以這樣跟 AI 說：

這個頁面在桌機上是 3 欄 Grid、平板變 2 欄、手機變 1 欄垂直堆疊。幫我寫完整的響應式 CSS。

練習題