Javascript 如何使内容具有响应性？

当有人单击按钮时，我使用JavaScript更改div宽度，但是div中的内容甚至使用@media规则也无法响应。正如您所看到的，当div为全宽时，它显示为两列，当宽度等于或小于290px时，我希望它只显示一列

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

函数myFunction（宽度）{
var all=document.getElementsByClassName（'Content_Container'）；
对于（变量i=0；i

正文{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
高度：300px；
}
.Button_容器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.中等{
利润率：0.15px；
}
.Content_容器{
宽度：100%；
背景颜色：蓝色；
边缘顶部：30px；
显示：网格；
对齐项目：拉伸；
网格模板列：重复（2，最小值（200px，1fr））；
栅柱间隙：60px；
网格行间距：60px；
}
.内容{
宽度：270px；
高度：90px；
}
.SE01{
背景颜色：黄色；
}
.SE02{
背景色：红色；
}
.SE03{
背景颜色：绿色；
}
.SE04{
背景颜色：灰色；
}
@仅介质屏幕和（最大宽度：290px）{
.Content_容器{
网格模板列：重复（1，最小值（200px，1fr））；
}
}

满满的
中等
小的

确保您正在调整适当的容器

我通过将

200px

减少到

100px

来调整

minmax

函数，因为“小”变体的蓝色容器小于内容（由于

网格间隙

）

函数myFunction（宽度）{
const all=document.getElementsByClassName（'Content_Container'）；
for（设i=0；i

html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.Button_容器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.中等{
利润率：0.15px；
}
.Content_容器{
显示：网格；
网格模板列：重复（2，最小值（100px，1fr））；
栅极间隙：60px；
对齐项目：拉伸；
弹性：1；
边缘顶部：1米；
背景颜色：蓝色；
}
.Content{flex:1；}
.SE01{背景色：黄色；}
.SE02{背景色：红色；}
.SE03{背景色：绿色；}
.SE04{背景色：灰色；}
@仅介质屏幕和（最大宽度：290px）{
.Content_容器{
网格模板列：重复（1，最小值（200px，1fr））；
}
}

满满的
中等
小的

使用

重复（自动调整，最小值（100px，1fr））


函数myFunction（宽度）{
var all=document.getElementsByClassName（'Content_Container'）；
对于（变量i=0；i

正文{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
高度：300px；
}
.Button_容器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.中等{
利润率：0.15px；
}
.Content_容器{
宽度：100%；
背景颜色：蓝色；
边缘顶部：30px；
显示：网格；
对齐项目：拉伸；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
栅极间隙：60px；
栅极间隙：60px；
}
.内容{
宽度：270px；
高度：90px；
}
.SE01{
背景颜色：黄色；
}
.SE02{
背景色：红色；
}
.SE03{
背景颜色：绿色；
}
.SE04{
背景颜色：灰色；
}
@仅介质屏幕和（最大宽度：290px）{
.Content_容器{
网格模板列：重复（1，最小值（200px，1fr））；
}
}

满满的
中等
小的
您在媒体查询中忘记了
类
内容容器
？感谢您指出，我刚刚添加了一个
，但它仍然不起作用…对我来说，它似乎工作得很好，只是
网格行间距：60px这会推高你的方块。可能这里的断点看起来是288px，如果你想包含290px，可能设置为291px。当宽度小于290px时，我需要它只显示一列……在你的描述中，你写的宽度等于且小于290px。所以，如果你想把290px设为inculde，那么把最大值设为291px。否则这里的代码就没有问题了。很抱歉告诉你。我不知道您使用的是什么浏览器Tanks，但我希望的结果是只显示一列，而不是在div的宽度较短时使列变短…@Ace您必须实际更改浏览器窗口的大小以获取媒体查询。更改容器的
width
样式不会触发媒体查询。这是有道理的，但如果无法在此处使用@media规则，当div变小时，如何使其仅显示一列？您好，我需要在div变小时只显示一列，而不是在div变小时使div宽度变小。@Ace使用
repeat（自动拟合，最小值（100px，1fr））更新解决方案
在较小的宽度上非常棒，但它会导致列显示为四个全宽…我需要它在全宽上是两列，在较小的宽度上是一列。