CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？（宽度.隐藏.窗口.媒体.显示.....）

wufei123 2025-03-01 阅读:1 评论:0

利用css媒体查询实现div的缩放显示/隐藏本文讲解如何使用CSS媒体查询，根据窗口宽度控制DIV元素的显示和隐藏。问题：如何实现：当窗口宽度小于特定值时显示DIV d1，隐藏DIV d2；当窗口宽度大于或等于特定值时显示DIV d...

CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？

利用css媒体查询实现div的缩放显示/隐藏

本文讲解如何使用CSS媒体查询，根据窗口宽度控制DIV元素的显示和隐藏。

问题：

如何实现：当窗口宽度小于特定值时显示DIV d1，隐藏DIV d2；当窗口宽度大于或等于特定值时显示DIV d2，隐藏DIV d1？

解决方案：

CSS媒体查询提供了解决方案。通过设置不同的媒体查询规则，我们可以针对不同屏幕宽度应用不同的样式。

DIV基本样式：首先，定义两个DIV的基本样式，例如尺寸和背景颜色。

媒体查询控制DIV显示：使用@media规则，根据窗口宽度控制DIV的display属性。例如：

@media (max-width: 1000px) {
    #d1 { display: block; } /* 窗口宽度小于等于1000px时显示d1 */
    #d2 { display: none; } /* 窗口宽度小于等于1000px时隐藏d2 */
}

@media (min-width: 1001px) {
    #d1 { display: none; } /* 窗口宽度大于1000px时隐藏d1 */
    #d2 { display: block; } /* 窗口宽度大于1000px时显示d2 */
}

完整示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS媒体查询示例</title>
<style>
#d1, #d2 {
    width: 300px;
    height: 300px;
}

#d1 {
    background-color: red;
}

#d2 {
    background-color: blue;
}

@media (max-width: 1000px) {
    #d1 { display: block; }
    #d2 { display: none; }
}

@media (min-width: 1001px) {
    #d1 { display: none; }
    #d2 { display: block; }
}
</style>
</head>
<body>

<div id="d1"></div>
<div id="d2"></div>

</body>
</html>

这个示例中，当浏览器窗口宽度小于等于1000像素时，红色DIV（d1）显示，蓝色DIV（d2）隐藏；反之，蓝色DIV（d2）显示，红色DIV（d1）隐藏。您可以根据需要调整max-width和min-width的值以及display属性的值来控制显示效果。

以上就是CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？的详细内容，更多请关注知识资源分享宝库其它相关文章！