前端css-媒体查询@media以及常见使用例子

媒体查询（@media）介绍

媒体查询（@media）是 CSS 中用来针对不同的设备特性（如屏幕尺寸、分辨率等）应用不同样式的一种技术。通过媒体查询，可以使页面在不同设备上呈现不同的布局，实现响应式设计。

@media media-type and (media-feature) {/* CSS rules */
}

media-type：表示媒体类型，常见的媒体类型有：

• all：适用于所有设备（默认）

• screen：适用于屏幕设备

• print：适用于打印设备

media-feature：表示媒体特性，比如设备的宽度、高度、分辨率等。 常见的媒体特性有：

• min-width：设备屏幕的最小宽度

• max-width：设备屏幕的最大宽度

• orientation：设备的屏幕方向（横向 landscape 或纵向 portrait）

---

媒体查询中的逻辑运算符

• and：用于组合多个条件，所有条件都满足时才会应用样式。

• ,（逗号）：相当于 "或" 操作，任意一个条件满足时应用样式。

• not：取反，应用在不符合某个条件的设备上。

常见例子

1. 基本的宽度媒体查询

针对不同屏幕宽度应用不同样式。一般用于响应式布局，根据设备的屏幕宽度调整布局和样式。

/* 当屏幕宽度小于等于600px时应用此样式 */
@media screen and (max-width: 600px) {body {background-color: lightblue;}
}/* 当屏幕宽度大于600px时应用此样式 */
@media screen and (min-width: 601px) {body {background-color: lightgreen;}
}

2. 响应式布局中常用的断点

针对不同设备屏幕宽度使用断点来调整布局。

/* 手机 */
@media screen and (max-width: 480px) {body {font-size: 14px;}
}/* 平板设备 */
@media screen and (min-width: 481px) and (max-width: 768px) {body {font-size: 16px;}
}/* 桌面设备 */
@media screen and (min-width: 769px) {body {font-size: 18px;}
}

3. 针对屏幕方向的媒体查询

orientation 可以判断设备是横屏还是竖屏。

/* 设备为横屏模式时应用此样式 */
@media screen and (orientation: landscape) {body {background-color: orange;}
}/* 设备为竖屏模式时应用此样式 */
@media screen and (orientation: portrait) {body {background-color: yellow;}
}

4. 针对高分辨率屏幕（如 Retina 屏幕）的媒体查询

min-resolution 或 min-device-pixel-ratio 可以检测设备的像素密度。

/* 针对高分辨率屏幕 */
@media screen and (min-resolution: 2dppx) {img {width: 50%;}
}/* 或者使用 device-pixel-ratio */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {img {width: 50%;}
}

5. 使用 not 排除某些条件

not 可以用于排除某些特定条件。

/* 应用在非屏幕设备上 */
@media not screen {body {background-color: gray;}
}

6. 多条件查询

组合多个条件，只有当两个条件同时满足时，才会应用样式。

/* 当屏幕宽度在600px和1200px之间，且是横屏模式时应用此样式 */
@media screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {body {background-color: pink;}
}

媒体查询的实际应用

媒体查询在响应式设计中应用非常广泛，可以通过它来根据设备的特性动态调整页面布局。例如，在开发移动端友好的网站时，可以通过媒体查询在不同屏幕宽度上设置不同的字体大小、间距、布局等，使得网站在手机、平板、桌面等设备上都有良好的展示效果。

总结

• 媒体查询是响应式设计的核心，通过它可以针对不同的设备或屏幕特性应用不同的 CSS 样式。

• 常见的使用场景包括设备宽度调整、屏幕方向检测、高分辨率屏幕优化等。