CSS響應式網頁設計簡介

響應式網頁設計 (RWD) 是一種設計網頁應用的方法，它可以在各種不同螢幕尺寸和解析度的裝置上準確地呈現。

什麼是響應式網頁設計？

響應式網頁設計確保網頁在任何使用者裝置（如手機、平板電腦、智慧電視和電腦）上都能良好顯示。
我們只需使用HTML和CSS就可以製作響應式網頁。無需使用JavaScript之類的程式語言。
透過使用CSS框架，例如bootstrap和tailwind css，我們可以簡化製作響應式設計的流程。

響應式網頁示例

下面的程式碼展示瞭如何使用HTML和CSS開發一個簡單的響應式網頁。我們使用了媒體查詢來定義小螢幕的樣式。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 200px 50px;
            grid-template-columns: 100px 1fr 1fr;
            grid-template-areas:
                "header header header"
                "sidebar content content"
                "footer footer footer";
            gap: 10px;
            background-color: lightgray;
            padding: 10px;
        }
        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
        .header {
            grid-area: header;
        }
        .sidebar {
            grid-area: sidebar;
        }
        .content {
            grid-area: content;
        }
        .footer {
            grid-area: footer;
        }

        /* Responsive design for screens smaller than 768px */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "header"
                    "content"
                    "sidebar"
                    "footer";
            }
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item header">Header</div>
        <div class="grid-item sidebar">Sidebar</div>
        <div class="grid-item content">Content Area</div>
        <div class="grid-item footer">Footer</div>
    </div>
</body>

</html>

輸出

RWD Example

響應式網頁設計概念

以下是CSS中用於響應式網頁設計的幾個概念和技術

媒體查詢：媒體查詢用於根據裝置的特性（例如螢幕寬度、高度甚至方向（橫向或縱向））應用CSS規則。透過使用媒體查詢，我們可以為不同的裝置定義不同的樣式。
響應式網格佈局：透過使用響應式網格佈局，我們可以根據使用者裝置的尺寸動態地改變佈局中的列數。像Bootstrap這樣的CSS框架提供了內建的網格系統，可以根據螢幕尺寸自動調整佈局。
響應式圖片 & 影片：確保圖片和影片在所有使用者裝置上都能正確渲染也很重要。為此，我們必須設定max-width屬性，以防止媒體在大螢幕上拉伸。
視口元標籤：視口元標籤用於HTML的<head>中，用於控制移動裝置上的視口行為和縮放比例。對於確保在各種螢幕尺寸上正確渲染至關重要。

列印頁面