CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？
时间：2025-03-23 09:27:10 294浏览 收藏
哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？ 》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！
利用CSS媒体查询实现DIV的缩放显示/隐藏
本文讲解如何使用CSS媒体查询，根据窗口宽度控制DIV元素的显示和隐藏。
问题：
如何实现：当窗口宽度小于特定值时显示DIV d1，隐藏DIV d2；当窗口宽度大于或等于特定值时显示DIV d2，隐藏DIV d1？
解决方案：
CSS媒体查询提供了解决方案。通过设置不同的媒体查询规则，我们可以针对不同屏幕宽度应用不同的样式。
-
DIV基本样式： 首先，定义两个DIV的基本样式，例如尺寸和背景颜色。
-
媒体查询控制DIV显示： 使用
@media规则，根据窗口宽度控制DIV的display属性。例如：
这个示例中，当浏览器窗口宽度小于等于1000像素时，红色DIV（d1）显示，蓝色DIV（d2）隐藏；反之，蓝色DIV（d2）显示，红色DIV（d1）隐藏。 您可以根据需要调整max-width和min-width的值以及display属性的值来控制显示效果。
本篇关于《CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！
