css3 媒体查询教程

CSS3 媒体查询是响应式设计中重要的一环，它可以根据设备的不同特性调整页面样式，让网站在不同设备上有更好的可用性和用户体验。

在实际的开发中，我们可以使用 @media 规则来定义媒体查询。其语法如下：

@media mediatype and (expression) {
   CSS rules
}

在这个语法中， mediatype 表示媒体类型，常见的媒体类型包括 all（所有设备）、print（打印设备）、screen（电脑屏幕）、speech（屏幕阅读器等语音合成功能）等。expression 表示媒体查询条件，可以根据不同需求定义不同的条件。CSS rules 则表示在满足条件的情况下需要应用的样式。

下面是一个使用媒体查询的示例，它将在浏览器宽度小于 600px 时将背景颜色改为红色：

@media screen and (max-width: 600px) {
   body {
       background-color: red;
    }
}

除了 max-width 外，还有其他常见的表达式，包括 min-width、max-height、min-height、orientation（设备方向）、resolution（设备分辨率）等。

除了基本语法之外，媒体查询还可以嵌套使用，如下面的例子将在窗口宽度小于 600px 时将 h1 标题改为红色：

@media screen and (max-width: 600px) {
   body {
       background-color: red;
    }
    h1 {
        color: red;
    }
}

总的来说，媒体查询是响应式设计中非常重要的一环，可以根据设备的不同特性进行页面样式调整，让网站更具有可用性和用户体验，同时也可以避免不必要的布局问题。