隨著移動設備的普及，響應式網頁設計變得越來越重要。響應式設計的核心理念是讓網頁能夠適應不同的屏幕尺寸和分辨率。媒體查詢是實現響應式設計的關鍵技術之一，它允許我們根據不同的設備特性來應用不同的CSS樣式規則。
媒體查詢基礎
媒體查詢由兩部分組成：媒體類型（如 screen、print 等）和至少一個使用邏輯表達式的查詢條件（如 min-width、orientation 等）。當媒體查詢的條件返回真值時，相關的CSS樣式則會被應用。
媒體查詢的基本語法如下：
@media not|only mediatype and (expressions) {
/* CSS 規則 */
}
- not: 排除某種特定的媒體類型。
- only: 指定某種特定的媒體類型，用於防止老舊瀏覽器不支持媒體查詢的情況。
- mediatype: 媒體類型，比如 screen、print。
- expressions: 邏輯表達式，用於檢測設備的特性，如寬度、高度等。
媒體查詢實例
例子 1: 根據屏幕寬度改變背景顏色
/* 默認樣式 */
body {
background-color: lightblue;
}
/* 屏幕寬度至少為 600px */
@media screen and (min-width: 600px) {
body {
background-color: pink;
}
}
/* 屏幕寬度至少為 900px */
@media screen and (min-width: 900px) {
body {
background-color: orange;
}
}
在這個例子中，當屏幕寬度小於600px時，背景顏色為淺藍色；寬度在600px到899px之間時，背景顏色變為粉色；寬度達到900px及以上時，背景顏色變為橙色。
例子 2: 根據屏幕寬度調整佈局
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
/* 兩列佈局 */
@media screen and (min-width: 600px) {
.column {
float: left;
width: 50%;
}
}
/* 三列佈局 */
@media screen and (min-width: 900px) {
.column {
width: 33.3333%;
}
}
在這個例子中，.container 默認是一個寬度為100%的容器。當屏幕寬度至少為600px時，.column 類的元素會並排排列成兩列佈局；當屏幕寬度至少為900px時，變為三列佈局。
例子 3: 針對不同設備調整字體大小
/* 默認字體大小 */
body {
font-size: 14px;
}
/* 平板設備 */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
font-size: 16px;
}
}
/* 橫屏顯示 */
@media screen and (orientation: landscape) {
body {
font-size: 18px;
}
}
在這個例子中，字體大小根據設備寬度和方向進行調整。平板設備在寬度介於768px到1024px之間時，字體大小增加到16px；當設備處於橫屏模式時，字體大小增加到18px。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Media Query</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.sidebar {
background-color: #f9f9f9;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.main-content {
padding: 15px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
/* Responsive layout for screens wider than 600px */
@media (min-width: 600px) {
.container {
display: flex;
}
.sidebar {
flex: 1;
order: 1;
border-bottom: none;
border-right: 1px solid #ddd;
}
.main-content {
flex: 3;
order: 2;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Responsive Page</h1>
</div>
<div class="container">
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar area, which contains navigation links and other information.</p>
</div>
<div class="main-content">
<h2>Main Content</h2>
<p>This is the main content area. It will display the primary information of the page.</p>
</div>
</div>
<div class="footer">
<p>Footer Content © 2023</p>
</div>
</body>
</html>
結語
媒體查詢是實現響應式設計的強大工具。通過合理使用媒體查詢，我們可以確保網頁在各種設備上都能提供良好的用戶體驗。隨著技術的發展，我們還可以利用更多高級的媒體查詢特性，如檢測分辨率、設備方向等，來進一步優化響應式設計。