2026年1月14日 星期三

RWD（Responsive Web Design，響應式網頁設計）

 網頁開發中非常重要的 RWD（Responsive Web Design，響應式網頁設計）。要讓導覽列在手機上「變身」，我們需要用到 CSS 的 媒體查詢（Media Queries）。

這是一個初學者也能理解的「漢堡選單」實作方式。

1. 核心觀念：媒體查詢 (Media Queries)

媒體查詢就像是給瀏覽器的指令：「如果螢幕寬度小於 768px（通常是手機/平板），就執行這套特殊的 CSS」。

2. 實作步驟

第一步：HTML 增加「漢堡圖示」

我們需要在原本的導覽列中加入一個按鈕，但在電腦版時先把它隱藏起來。

HTML
<nav class="navbar">
    <div class="logo">我的網站</div>
    
    <div class="menu-toggle" id="mobile-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </div>

    <ul class="nav-links">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</nav>

第二步：CSS 響應式佈局

我們利用 position: absolute 讓選單在手機版時「浮」在畫面上。

CSS
/* --- 電腦版樣式 (延用之前的) --- */
/* ... 省略部分基礎樣式 ... */

.menu-toggle { display: none; cursor: pointer; } /* 電腦版隱藏按鈕 */

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
}

/* --- 手機版樣式 (關鍵！) --- */
@media screen and (max-width: 768px) {
    .nav-links {
        display: none;        /* 預設先隱藏選單 */
        flex-direction: column; /* 改為垂直排列 */
        width: 100%;
        position: absolute;
        top: 70px;            /* 在導覽列下方 */
        left: 0;
        background-color: #2c3e50;
    }

    .nav-links.active {
        display: flex;       /* 當點擊按鈕時，加上 active 類別顯示選單 */
    }

    .menu-toggle {
        display: block;      /* 手機版顯示漢堡按鈕 */
    }
}

第三步：JavaScript 點擊切換

HTML/CSS 只能做出樣子，要點了會「彈出來」，需要一點點簡單的 JavaScript。

JavaScript
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.nav-links');

// 當點擊漢堡按鈕時，切換 'active' 類別
menu.addEventListener('click', function() {
    menuLinks.classList.toggle('active');
});

3. 完整練習範例

將下方的代碼存成一個 HTML 檔案，然後試著縮小瀏覽器視窗，你會看到它自動從橫向導覽列變成漢堡選單！

HTML
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: sans-serif; }
        
        .navbar {
            background-color: #333;
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            color: white;
        }

        .nav-links { list-style: none; display: flex; }
        .nav-links li { margin-left: 20px; }
        .nav-links a { color: white; text-decoration: none; }

        .menu-toggle { display: none; flex-direction: column; cursor: pointer; }
        .bar { width: 25px; height: 3px; background: white; margin: 4px 0; }

        /* 手機版適配 */
        @media (max-width: 768px) {
            .menu-toggle { display: flex; }
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                position: absolute;
                top: 70px;
                left: 0;
                background-color: #444;
                text-align: center;
            }
            .nav-links.active { display: flex; }
            .nav-links li { margin: 20px 0; }
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="logo">LOGO</div>
        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <ul class="nav-links" id="nav-list">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產品</a></li>
            <li><a href="#">聯絡</a></li>
        </ul>
    </nav>

    <script>
        const menu = document.getElementById('mobile-menu');
        const navList = document.getElementById('nav-list');
        menu.onclick = () => navList.classList.toggle('active');
    </script>
</body>
</html>

學到這裡，你已經跨入了「網頁設計師」的門檻！

你已經學會了：

  1. HTML 結構（骨架）

  2. CSS 樣式與顏色（皮膚）

  3. CSS 表格與導覽列（組件）

  4. CSS 動畫與 RWD（靈魂）

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)