【css媒体查询写法】在现代网页设计中，响应式布局已经成为标配。而实现这一目标的核心技术之一，就是CSS媒体查询（Media Queries）。它能够根据设备的屏幕宽度、分辨率、方向等特性，动态地应用不同的样式规则，从而让网站在不同设备上都能呈现出最佳的浏览体验。

一、什么是媒体查询？

媒体查询是CSS3引入的一个强大功能，允许开发者通过条件判断来加载不同的CSS样式。其基本语法如下：

```css

@media 媒体类型 and (条件) {

/ 样式规则 /

}

```

常见的媒体类型包括 `screen`（用于屏幕）、`print`（用于打印）、`speech`（用于语音合成器）等。在实际开发中，`screen`是最常用的类型。

二、常见媒体查询写法

1. 按屏幕宽度区分

这是最常见的使用方式，例如：

```css

@media screen and (max-width: 768px) {

body {

font-size: 14px;

}

}

@media screen and (min-width: 769px) {

body {

font-size: 16px;

}

}

```

上面的例子表示：当屏幕宽度小于等于768px时，字体大小为14px；当大于768px时，字体大小为16px。

2. 按设备方向区分

```css

@media screen and (orientation: portrait) {

.container {

width: 100%;

}

}

@media screen and (orientation: landscape) {

.container {

width: 80%;

}

}

```

此处根据手机或平板的方向（竖屏或横屏）来调整容器宽度。

3. 结合多个条件

可以使用 `and`、`not`、`only` 等关键字来组合多个条件：

```css

@media screen and (min-width: 600px) and (orientation: landscape) {

.sidebar {

display: block;

}

}

```

表示：只有在屏幕宽度大于等于600px且为横屏时，才显示侧边栏。

三、媒体查询的最佳实践

- 移动优先原则：先编写适用于小屏幕的样式，再逐步添加针对大屏幕的样式。

- 避免过度嵌套：尽量保持媒体查询结构清晰，便于维护。

- 使用断点统一管理：可以将常见的断点（如768px、1024px）定义在变量中，提升可读性和复用性。

- 测试多设备：使用浏览器的开发者工具模拟不同设备，确保样式表现符合预期。

四、媒体查询的高级技巧

1. 使用逻辑运算符

除了 `and`，还可以使用 `not` 和 `only` 来控制媒体查询的执行条件：

```css

@media not screen and (min-width: 900px) {

body {

background: f0f0f0;

}

}

```

这个例子会在屏幕宽度小于900px时生效。

2. 使用媒体查询与CSS框架结合

如Bootstrap、Foundation等前端框架都内置了媒体查询机制，开发者可以通过类名快速实现响应式布局。

3. 响应式图片处理

结合 `srcset` 和 `sizes` 属性，配合媒体查询，可以实现更高效的图片加载策略。

总结

CSS媒体查询是构建响应式网页不可或缺的一部分。掌握其基本语法和使用场景，能够显著提升网页在不同设备上的兼容性和用户体验。通过合理的断点设置和结构设计，可以让网站更加灵活、高效地适应各种屏幕环境。希望本文能帮助你更好地理解和应用媒体查询，打造更优秀的网页作品。