介紹

媒體查詢（Media Queries）是CSS3的技術，可以根據設備的特性（如屏幕寬度、高度、方向等）來應用不同的樣式規則。媒體查詢可以使網頁在不同設備上呈現不同的樣式，以實現響應式設計。

語法

@media scree and (max-width: 600px) {/* 在屏幕寬度小于600px時應用以下樣式 */body {background-color: lightblue;}
}

媒體類型

all：使用設備

print：打印機和預覽打印

scree（常用）：電腦屏幕 手機 平板

查詢關鍵字

and(常用) 可以將多個媒體特性連接到一起，相當于“且”的意思。

only 指定某個特定的媒體類型，可以省略。

not 排除某個媒體類型，相當于“非”的意思，可以省略。

媒體特性

width 等于xx時樣式

min-width 最大不超過xx px 時，小于xx px時的樣式

max-width 最小不超過xx px時， 大于xx px時的樣式