CSS3 多媒体查询实例

在现代的 web 开发中，我们经常需要为不同的设备和屏幕尺寸定制不同的样式。CSS3 中的多媒体查询（Media Queries）为我们提供了一种灵活的方式来实现响应式设计，使网页能够在不同设备上呈现出最佳的布局和样式。

媒体查询语法

媒体查询的语法非常简单，它由 @media 关键字和一个条件组成。条件可以是设备的宽度、高度、方向等等。例如，我们可以通过以下代码来设置当浏览器宽度小于 768px 时应用的样式：

@media screen and (max-width: 768px) {
    /* 在这里编写样式 */
}

常用的媒体查询条件

除了上面提到的 max-width，还有一些其他常用的媒体查询条件，比如：

• min-width：最小宽度
• orientation：设备方向（横向或纵向）
• max-device-width：设备最大宽度
• min-device-width：设备最小宽度

示例

现在让我们通过一个简单的示例来演示如何使用媒体查询来实现响应式设计。假设我们有一个页面上有一个导航栏和一个内容区域，我们希望在浏览器宽度小于 768px 时，导航栏变为垂直布局。我们可以这样实现：

// www.javascriptcn.com code example
/* 默认样式 */
nav {
    display: flex;
    justify-content: space-between;
}

/* 在小屏幕下应用的样式 */
@media screen and (max-width: 768px) {
    nav {
        flex-direction: column;
    }
}

通过这样的媒体查询，我们可以很容易地实现不同屏幕尺寸下的布局调整。在实际开发中，我们可以根据具体需求和设计稿来设置不同的媒体查询条件，从而实现最佳的用户体验。

在下一个章节中，我们将继续探讨 CSS3 中更多的特性和技巧，敬请期待！