HTML & CSS RWD @media 使用介紹 | CSS

HTML和CSS中的Responsive Web Design（RWD）技術，特別是@media查詢，是用來製作具有響應式的網頁。讓我們一起來看看如何使用@media查詢在不同設備上呈現不同的風格和排版。

1. 什麼是Responsive Web Design（RWD）？

簡而言之，RWD是一種設計和開發網頁的方法，使其可以適應不同大小和型號的設備，包括桌面電腦、平板電腦和手機。而@media查詢則是在CSS中使用的一種技術，它允許你在不同的條件下應用不同的CSS樣式。

2. 如何使用@media查詢？

在CSS中，你可以使用@media查詢來檢查不同的媒體條件，例如螢幕寬度、螢幕高度等。讓我們通過以下示例來演示如何在不同設備尺寸下應用不同的樣式：

/* 手機尺寸 */
@media only screen and (max-width: 500px) {
    /* 在螢幕寬度小於500px時應用的樣式 */
    body {
        font-size: 14px;
    }
}

/* 平板尺寸 */
@media only screen and (min-width: 501px) and (max-width: 768px) {
    /* 在螢幕寬度介於501px和768px之間時應用的樣式 */
    body {
        font-size: 16px;
    }
}

/* 電腦尺寸 */
@media only screen and (min-width: 769px) {
    /* 在螢幕寬度大於769px時應用的樣式 */
    body {
        font-size: 18px;
    }
}

3. 簡單範例

讓我們假設你希望在不同設備尺寸下調整標題的大小。以下是一個簡單的HTML和CSS範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RWD @media 範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>歡迎來到我的網站</h1>
    </header>
</body>
</html>

/* styles.css */
/* 手機尺寸 */
@media only screen and (max-width: 500px) {
    header h1 {
        font-size: 20px;
    }
}

/* 平板尺寸 */
@media only screen and (min-width: 501px) and (max-width: 768px) {
    header h1 {
        font-size: 24px;
    }
}

/* 電腦尺寸 */
@media only screen and (min-width: 769px) {
    header h1 {
        font-size: 28px;
    }
}

通過上述代碼，你可以在不同設備尺寸下，使用@media查詢來調整標題的大小，以提供更好的閱讀體驗。

結論

使用@media查詢是實現Responsive Web Design的關鍵技術之一。通過適當地應用@media查詢，你可以確保你的網站在各種設備上都能夠呈現出最佳的風格和排版。希望這篇文章能夠幫助你更好地理解並應用RWD技術！