介绍

媒体查询（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时的样式