媒体查询是CSS的重要特性，主要用于创建响应式设计。它允许根据不同的视口特性，像宽度和高度，来应用不同的样式规则。使用媒体查询可以确保网站在各种设备上都有良好的显示效果。媒体查询的基本语法如下： ```css @media media-type and (media-feature) { /* CSS规则 */ } ``` media-type可以是all、screen、print等。media-feature常见的有min-width、max-width等，它们用于指定条件。例如，如果希望在宽度为768像素及以下的设备上应用特定样式，可以使用如下代码： ```css @media screen and (max-width: 768px) { body { background-color: lightblue; } } ``` 此代码片段会使得在移动设备上，背景变为浅蓝色。有时想要为较大屏幕设备设定样式，可以利用min-width。例如： ```css @media screen and (min-width: 769px) { body { background-color: lightgreen; } } ``` 当视口宽度达到769像素以上，背景色会变为浅绿色。可以组合多个条件来实现更复杂的样式设置。使用逗号分隔不同的媒体查询就可以。例如，要同时为最大和最小宽度设置样式，可以这样写： ```css @media screen and (max-width: 768px), screen and (min-width: 1200px) { body { font-size: 14px; } } ``` 这意味着，当设备宽度小于768像素或大于1200像素时，字体大小都调整为14像素。使用媒体查询可以灵活地实现不同屏幕和设备的优化。网站在桌面、平板和手机等屏幕上的表现能得到明显提升，提升用户体验。每个媒体查询及其规则都是按照需求添加的，这意味着可以根据设计需求，逐步调整和完善响应式结果。设计师可以随时检查媒体查询效果，并利用开发者工具进行实时预览和调整。 这种技术使得设计师们不再需要为每种设备设计独立的网站，而是可以创建一个网站，能够根据用户设备的不同进行风格响应。通过媒体查询，使得界面布局、文字、图片等都可以自适应不同的屏幕，达到理想的展示效果。