CSS中的media query通过设备特性应用不同样式，常用于响应式设计。使用@media规则定义条件，如屏幕宽度、方向等，结合min-width、max-width和orientation等媒体特性，使页面适配手机、平板和桌面设备。
在CSS中，media query 用于根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式。它最常用于实现响应式网页设计，让页面在手机、平板、桌面等不同设备上都有良好的显示效果。
基本语法结构
media query 使用 @media 规则包裹一组CSS样式，只有当指定条件满足时，这些样式才会生效。
@media mediatype and (condition) {
/* 满足条件时应用的样式 */
body {
background-color: lightblue;
}
}
}
}
其中：
-
mediatype：设备类型，比如
screen（屏幕）、print（打印）、all（所有设备）等。可省略，默认为 all。 - and：逻辑操作符，连接媒体类型和条件。
- (condition)：媒体特性表达式，例如最大宽度、最小宽度、设备方向等。
常用媒体特性
最常见的用途是根据视口宽度调整布局。以下是一些常用的条件：
- min-width：视口宽度大于或等于指定值时生效。
- max-width：视口宽度小于或等于指定值时生效。
-
orientation：检测设备方向，如
portrait（竖屏）或landscape（横屏）。 - resolution：检测像素密度，适用于高清屏幕。
实际使用示例
下面是一个典型的响应式布局写法：
/* 默认样式（小屏幕） */
.container {
width: 100%;
padding: 10px;
}
/ 平板及以上设备（屏幕宽度 >= 768px） /
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/ 桌面设备（屏幕宽度 >= 1024px） /
@media screen and (min-width: 1024px) {
.container {
width: 980px;
}
}
/ 横屏设备 /
@media screen and (orientation: landscape) {
body {
font-size: 16px;
}
}
结合多个条件
可以使用 and 连接多个条件，也可以用 not 或 only 控制查询行为。
/* 在宽度介于 600px 到 1024px 之间的设备上生效 */
@media screen and (min-width: 600px) and (max-width: 1024px) {
.sidebar {
display: none;
}
}
使用 not 可以否定整个查询（主要用于避免某些设备应用样式）。
基本上就这些。掌握好 media query 能让你的网页更灵活地适应各种设备。
