我想使用HTML/ CSS創(chuàng)建一個(gè)工具欄，當(dāng)瀏覽器縮小時(shí)，某些元素會(huì)完全消失。它應(yīng)該類(lèi)似于大多數(shù)瀏覽器上收藏夾欄的工作方式，顯示可變數(shù)量的項(xiàng)目。
在此示例中，當(dāng)瀏覽器大小導(dǎo)致第2部分的flex項(xiàng)目縮小到其原始寬度300px以下時(shí)，它應(yīng)該隱藏。目前，它在萎縮，而不是消失。我希望這種行為基于項(xiàng)目的大小做出響應(yīng)，所以我不認(rèn)為媒體查詢(xún)會(huì)起作用。使用CSS可以選擇性隱藏元素嗎？
jsdild鏈接
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>您正在尋找的方法是新的css容器查詢(xún)，基于它的父級(jí)的大小來(lái)改變
https://developer . Mozilla . org/docs/Web/CSS/CSS _ Container _ Queries
還有一種javascript方法可以做與媒體查詢(xún)完全相同的事情:javascript匹配媒體方法(不像上面的容器查詢(xún))
https://developer . Mozilla . org/en-US/docs/Web/API/Window/match media