如何使内容具有响应性？

Question

当有人单击按钮时，我正在使用 JavaScript 更改 div 宽度，但即使使用 @media 规则，div 内的内容也无法响应。 如您所见，当 div 全宽时它显示为两列，我希望它在宽度等于且小于 290px 时仅显示一列。

我可以知道为什么它不起作用以及如何解决它吗？ 下面是代码：

 function myFunction(width){ var all = document.getElementsByClassName('Content_Container'); for (var i = 0; i < all.length; i++) { all[i].style.width = width; } }

 body { display: flex; flex-direction: column; justify-content: center; height: 300px; }.Button_Container { display: flex; flex-direction: row; justify-content: center; }.Medium { margin: 0 15px; }.Content_Container { width: 100%; background-color: blue; margin-top: 30px; display: grid; align-items: stretch; grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-column-gap: 60px; grid-row-gap: 60px; }.Content { width: 270px; height: 90px; }.SE01 { background-color: yellow; }.SE02 { background-color: red; }.SE03 { background-color: green; }.SE04 { background-color: grey; } @media only screen and (max-width: 290px) {.Content_Container { grid-template-columns: repeat(1, minmax(200px, 1fr)); } }

 <div class="Button_Container"> <button class=">FULL" onclick="myFunction('100%')">FULL</button> <button class="Medium" onclick="myFunction('70%')">Medium</button> <button class="Small" onclick="myFunction('50%')">Small</button> </div> <div class="Content_Container"> <div class="Content SE01"></div> <div class="Content SE02"></div> <div class="Content SE03"></div> <div class="Content SE04"></div> </div>

Answer 1

确保您正在弯曲适当的容器。

我通过将200px减少到100px调整了你的minmax function ，因为“小”变体的蓝色容器小于内容（由于grid-gap ）。

 function myFunction(width) { const all = document.getElementsByClassName('Content_Container'); for (let i = 0; i < all.length; i++) { all[i].style.width = width; } } myFunction('100%'); // Initialize

 html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; }.Button_Container { display: flex; flex-direction: row; justify-content: center; }.Medium { margin: 0 15px; }.Content_Container { display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); grid-gap: 60px; align-items: stretch; flex: 1; margin-top: 1em; background-color: blue; }.Content { flex: 1; }.SE01 { background-color: yellow; }.SE02 { background-color: red; }.SE03 { background-color: green; }.SE04 { background-color: grey; } @media only screen and (max-width: 290px) {.Content_Container { grid-template-columns: repeat(1, minmax(200px, 1fr)); } }

 <div class="Button_Container"> <button class=">FULL" onclick="myFunction('100%')">FULL</button> <button class="Medium" onclick="myFunction('70%')">Medium</button> <button class="Small" onclick="myFunction('50%')">Small</button> </div> <div class="Content_Container"> <div class="Content SE01"></div> <div class="Content SE02"></div> <div class="Content SE03"></div> <div class="Content SE04"></div> </div>

Answer 2

使用repeat(auto-fit, minmax(100px, 1fr));

 function myFunction(width){ var all = document.getElementsByClassName('Content_Container'); for (var i = 0; i < all.length; i++) { all[i].style.width = width; } }

 body { display: flex; flex-direction: column; justify-content: center; height: 300px; }.Button_Container { display: flex; flex-direction: row; justify-content: center; }.Medium { margin: 0 15px; }.Content_Container { width: 100%; background-color: blue; margin-top: 30px; display: grid; align-items: stretch; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 60px; grid-gap: 60px; }.Content { width: 270px; height: 90px; }.SE01 { background-color: yellow; }.SE02 { background-color: red; }.SE03 { background-color: green; }.SE04 { background-color: grey; } @media only screen and (max-width: 290px) {.Content_Container { grid-template-columns: repeat(1, minmax(200px, 1fr)); } }

 <div class="Button_Container"> <button class=">FULL" onclick="myFunction('100%')">FULL</button> <button class="Medium" onclick="myFunction('70%')">Medium</button> <button class="Small" onclick="myFunction('50%')">Small</button> </div> <div class="Content_Container"> <div class="Content SE01"></div> <div class="Content SE02"></div> <div class="Content SE03"></div> <div class="Content SE04"></div> </div>