媒体查询是响应式网页设计中不可或缺的部分，通常用于指定在不同的设备或窗口大小下的CSS样式。通过媒体查询，能够针对手机、平板和桌面等多种设备优化网页。在CSS中，媒体查询可以通过@media规则来实现。
一般情况下，媒体查询会根据设备的Width或Height进行判断。当屏幕的大小满足特定条件时，相关的CSS样式就会生效。例如，可以在CSS文件中为特定的屏幕宽度设置不同的布局。
基础的媒体查询语法如下：
```css @media only screen and (max-width: 600px) { body { background-color: lightblue; } } ``` 在这个例子中，当设备的屏幕宽度小于600px时，页面的背景色将变为浅蓝色。
媒体查询可以更加复杂，也支持多个条件叠加。使用and可以结合多个条件，只在同时满足这些条件时应用样式。
```css @media only screen and (max-width: 600px) and (orientation: portrait) { body { background-color: lightgreen; } } ``` 在这个例子中，当设备宽度小于600px且为竖屏时，背景颜色变为浅绿色。
也可以使用or的方式，针对不同的特性或者条件指定样式。使用逗号分隔不同的媒体查询，可以同时应用不同的样式。
```css @media only screen and (max-width: 600px), only screen and (max-height: 400px) { body { background-color: lightcoral; } } ``` 当设备宽度小于600px或高度小于400px时，背景将变为浅珊瑚色。
利用匹配媒体类型，可以对打印样式和屏幕样式分别定义，提供更灵活的样式调整。
```css @media print { body { font-size: 12pt; } } ``` 在打印时，文本的字体大小会调整为12pt，从而提高打印效果。
设置多个媒体查询时，优先级会按照样式表中出现的顺序来决定应用的样式。后定义的样式将覆盖先前的样式。利用这一特性，可以为相同的元素在不同条件下，设置不同的样式。
采用移动优先的设计理念时，通常会先写适配小屏幕设备的样式，然后再添加适合大屏幕的媒体查询。这样可以减少CSS的冗余，提高加载速度。
媒体查询在现代网页开发中是一项重要工具，适当使用可以为用户提供更好的浏览体验。确保在各个设备下，网页都能以最佳状态展示。