媒体查询是一种强大的工具，用于在不同设备上实现自适应的样式。通过这种方法，可以根据视口的大小、分辨率等特性为不同的设备提供适合的CSS规则。
媒体查询的基本语法非常简单。通常情况下，它以`@media`开头，后跟条件和样式。在CSS文件中添加如下示例代码：
```css@media screen and (max-width: 600px) { body { background-color: lightblue; }}```
上面的代码表示当设备的视口宽度小于或等于600像素时，页面背景将会变为浅蓝色。这意味着手机用户会看到与桌面用户不同的样式。
可以根据不同需求，针对不同设备类型使用媒体查询。例如，针对打印设备、屏幕设备、游戏机等进行区分。代码的结构如下：
```css@media print { body { font-size: 12pt; }}@media screen and (min-width: 601px) { body { font-size: 16pt; }}```
在这个示例中，打印时字体大小会有所减少，而在较大屏幕上则应用更大的字体。从而用户在不同情景下的阅读体验均可优化。
除了视口宽度，媒体查询还可以基于设备的高度、分辨率、方向等设置不同的样式。例如，可以对竖屏和横屏进行区分，为其提供不同的CSS。
```css@media screen and (orientation: portrait) { body { background-color: lightgreen; }}@media screen and (orientation: landscape) { body { background-color: lightcoral; }}```
在这个例子中，竖屏和横屏的背景颜色不同，从而可以为用户提供个性化的视觉体验。
有时候，可能仅仅需要在特定设备上隐藏某些元素。可以在媒体查询中使用`display: none`来实现。例如，针对低分辨率设备的优化：
```css@media screen and (max-width: 400px) { .sidebar { display: none; }}```
这段代码确保在宽度不超过400像素的设备上，侧边栏将不会显示，从而使内容更为集中。
应用媒体查询时，保持代码的可读性和结构性非常重要。可以将相关的查询按类型或特性分组，这样在后续维护时更加清晰明了。
常用的媒体查询通常针对PC、平板和手机进行分类。在编写多条查询时，可以在上方按从大到小的顺序排列，以确保大的查询能够优先应用。
活用CSS的媒体查询，将为用户提供更好、更流畅的体验。根据不同设备的特性设置样式，确保网页在多种设备上都能保持美观和功能的完整性。