隨著裝置類型的多樣化，網站必須適應各種螢幕尺寸與解析度，這已經成為現代網頁設計的基本要求。本文將介紹 Media Queries 媒體查詢，正好能幫我們實現這種響應式設計，根據使用者的裝置特性套用不同樣式。
什麼是媒體查詢？
媒體查詢是 CSS 中的一種條件式樣式技術，它允許我們根據裝置的特性（如螢幕寬度、高度、解析度、方向等）來指定不同的樣式。我們可以針對不同的裝置，設計適合的版面配置和樣式，提升使用者體驗。媒體查詢基本語法
媒體查詢的基本語法如下：/*
@media 媒體類型 and (媒體特性) {
CSS 樣式
}
*/
/* 會在螢幕寬度小於等於 600px 時，將背景顏色設定為淺灰色 */
@media screen and (max-width: 600px) {
body {
background-color: #f0f0f0;
}
}
常用的媒體特性
以下是一些常見的媒體特性：
max-width和min-width：設定螢幕寬度的最大值和最小值。max-height和min-height：設定螢幕高度的最大值和最小值。orientation：判斷裝置目前為縱向顯示（portrait）或橫向顯示（landscape）。
/* 會在裝置為縱向顯示時，將字體大小設定為 14px */
@media screen and (orientation: portrait) {
body {
font-size: 14px;
}
}
使用邏輯運算子組合條件
在媒體查詢中，可以使用邏輯運算子來組合多個條件：
and：當所有條件都滿足時，套用樣式。not：當條件不滿足時，套用樣式。,（逗號）：當任一條件滿足時，套用樣式。
/* 螢幕寬度介於 400px 和 700px 之間時，將背景顏色設定為淺藍色 */
@media screen and (min-width: 400px) and (max-width: 700px) {
body {
background-color: #e0f7fa;
}
}
實際應用範例
在實際應用中，媒體查詢常用於製作響應式網頁設計，透過設定不同的媒體查詢，我們可以針對手機、平板、桌面等不同裝置，設計適合的版面配置和樣式。
/* 當螢幕寬度小於等於 600px 時，導航列的排列方式會從水平改為垂直，以適應手機螢幕的顯示。 */
/* 預設樣式 */
.nav {
display: flex;
justify-content: space-around;
}
/* 手機裝置樣式 */
@media screen and (max-width: 600px) {
.nav {
flex-direction: column;
}
}
結語
透過適當地運用 CSS 媒體查詢，我們可以讓網站在各種裝置上都能提供良好的使用者體驗，滿足不同使用情境的需求。