利用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 */}
完整示例：
CSS媒体查询示例 #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; }}
这个示例中，当浏览器窗口宽度小于等于1000像素时，红色DIV（d1）显示，蓝色DIV（d2）隐藏；反之，蓝色DIV（d2）显示，红色DIV（d1）隐藏。 您可以根据需要调整max-width和min-width的值以及display属性的值来控制显示效果。
以上就是CSS媒体查询：如何根据窗口宽度显示或隐藏不同的DIV？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561553.html
微信扫一扫 
支付宝扫一扫 
