媒体查询是一种强大的CSS功能，允许根据不同的视口条件应用样式。这样的网站可以在各种设备上良好展示。媒体查询通常用于响应式设计中，以确保内容在不同设备上的可读性和可用性。
使用媒体查询的基本语法是`@media`，后面接条件表达式。基本形式如下：
```css@media 媒体类型和条件 { /* CSS 规则 */}```
媒体类型包括`all`（适用于所有设备）、`screen`（适用于显示设备）、`print`（用于打印）、`speech`（用于语音合成）。具体条件可以是屏幕宽度、高度、分辨率等。
例如，针对小屏幕设备如手机，可以这样写：
```css@media screen and (max-width: 600px) { body { background-color: lightblue; }}```
在这个例子中，当设备宽度小于等于600像素时，背景颜色会变为淡蓝色。条件组合可以使用`and`、`or`等逻辑操作符。
使用媒体查询时，可以结合多个条件使用。例如：
```css@media screen and (min-width: 600px) and (max-width: 1200px) { body { background-color: lightgreen; }}```
这里设置了一个范围，只有当设备宽度在600到1200像素之间，背景颜色才会变为淡绿色。
制作响应式设计时，合理安排媒体查询的位置至关重要。推荐把最基本的样式放在顶部，媒体查询后置，以方便后续的样式覆盖。
响应式设计的一个好处是用户体验的一致性。通过合理设置媒体查询，可以确保网站在电脑、平板和手机上呈现佳效果。使用`viewport`元标签也能帮助控制页面的尺寸和缩放。
以下是一个简单的媒体查询组合的示例：
```css@media (max-width: 600px) { h1 { font-size: 24px; }}@media (min-width: 601px) and (max-width: 900px) { h1 { font-size: 36px; }}@media (min-width: 901px) { h1 { font-size: 48px; }}```
这个示例中，标题的字体大小会根据不同的屏幕宽度变化，确保在每个设备上都能吸引用户注意。
使用媒体查询也可以加入其他条件，如方向（横屏或竖屏）：
```css@media screen and (orientation: landscape) { /* 横屏的样式 */}```
媒体查询是现代网页设计中不可或缺的一部分。通过这一功能，开发者可以为不同的设备定制样式，提高用户体验。掌握这一技术，将助于设计出真正响应式的网站。