2. 媒體查詢 · 前端教學筆記[更新中...]

# 更實用的風格布局這是一個較復雜的布局案例, 用到了媒體查詢 ## 效果圖 ### 原圖 ![](https://img.kancloud.cn/17/5d/175dd4ba832155b22364c0c3b11e18cd_1860x1910.jpg) ### 分析: ![](https://img.kancloud.cn/ad/f5/adf5d029c4bdb5377ee9a99ff45fdb9b_2242x1796.jpg) --- ## HTML結構 ```html <!DOCTYPE html> <html lang="en"> <head> <meta name="description" content="grid 主頁" /> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> <title>首頁</title> </head> <body> <header class="top-bar"> top-bar </header> <header class="main-header"> main-header </header> <section class="hero"> <div class="message"> message </div> <div class="award"> award </div> </section> <section class="blog-posts"> blog-posts </section> <section class="news"> news </section> <aside class="side-bar"> side-bar </aside> <footer class="main-footer"> main-footer </footer> </body> </html> ``` --- ## CSS代碼 ```css /* style.css */ body { display: grid; grid-template-columns: 12% auto 400px 12%; grid-template-rows: auto auto 300px auto auto auto; grid-template-areas: "top-bar top-bar top-bar top-bar" "main-header main-header main-header main-header" "hero hero hero hero" ". blog-posts side-bar ." ". news side-bar ." "main-footer main-footer main-footer main-footer"; margin: 0; font-size: 1.5rem; } .top-bar{ /*區域命名*/ grid-area: top-bar; background-color: lightblue; padding: 4px 12%; } .main-header{ grid-area: main-header; background-color: lightcoral; padding: 12px 12%; } .hero{ grid-area: hero; background: lightseagreen; padding: 55px 12% 0 12%; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: ". . award" "message . . " ". . . "; } .blog-posts{ grid-area: blog-posts; min-height: 200px; background-color: yellowgreen; } .news{ grid-area: news; min-height: 200px; background-color: cyan; } .side-bar{ grid-area: side-bar; background: #0e8; } .main-footer{ grid-area: main-footer; background-color: lightblue; padding: 25px 12%; } .message{ grid-area: message; } .award{ grid-area: award; } /*媒體查詢*/ @media (max-width: 1600px) { body{ grid-template-columns: 2% auto 400px 2%; } .top-bar{ padding: 4px 2%; } .main-header{ padding: 12px 2%; } .hero{ padding: 55px 2% 0 2%; } .main-footer{ padding: 25px 2%; } } /*媒體查詢*/ @media (max-width: 1050px) { body{ grid-template-columns: 3% auto 3%; grid-template-rows: auto auto auto auto auto auto auto; grid-template-areas: "top-bar top-bar top-bar" "main-header main-header main-header" "hero hero hero" ". blog-posts ." ". news ." ". side-bar ." "main-footer main-footer main-footer"; } } ```