媒体查询使用一个名为“@media”的关键字来定义不同的媒体类型，例如“screen”(全屏幕)、“print”(打印)、“speech”(声音)等等。当浏览器遇到这些媒体类型时，它会执行相应的操作，从而选择不同的样式。
以下是一个简单的媒体查询示例，用于为手机浏览器和桌面浏览器提供不同的样式：
/* 为桌面浏览器提供样式 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
/* 为手机浏览器提供样式 */
@media screen and (max-width: 768px) {
body {
font-family: Arial, sans-serif;
background-color: #fff;
在这个示例中，大家使用“@media screen and (max-width: 768px)”来定义手机浏览器的样式。当浏览器遇到这个媒体查询时，它会将页面调整为最小宽度为768px，此时页面的样式会与桌面浏览器相同。
媒体查询是一种非常重要的CSS技术，可以帮助大家在不同的屏幕上提供不同的样式布局，让网页在不同设备上都能够得到良好的视觉效果。