我想使用HTML/CSS创建一个工具栏，当浏览器大小减小时，某些元素完全消失。它应该类似于大多数浏览器上收藏夹栏的工作方式，显示可变数量的项目。
在这个例子中，当浏览器的大小使第2节的flex项减小到低于其原始宽度300 px时，它应该隐藏。目前，它正在缩小而不是消失。我希望此行为能够根据项目的大小进行响应，因此我认为媒体查询将不起作用。使用CSS可以实现选择性隐藏元素吗？
jsfiddle link
CSS：
...
.container{
flex-wrap: nowrap;
display: flex;
justify-content: space-between;
border: 2px black solid;
overflow: hidden;
width: 100%;
}
div{
height: 100px;
}
#div1{
width: 300px;
background-color:#7fffd4;
flex-shrink: 0;
}
#div2{
width: 300px;
background-color: #ffb6c1;
}HTML：
...
<body>
<container class="container">
<div id="div1">Section 1: this section should always remain visible</div>
<div id="div2">Section 2: this entire section should disappear when reduced below initial width of 300px</div>
</container>
</body>
1条答案
按热度按时间nfs0ujit1#
您正在寻找的方法是新的css容器查询，根据它的父的大小改变
https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries
还有一种JavaScript方法可以做与媒体查询完全相同的事情：javascript匹配媒体方法（不像上面的容器查询）
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia