在html中使两列响应

Question

可能很简单。我制作了一个网页，现在需要它以 375 像素响应移动设备；

在我添加的html中：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

我的两列在html中的命名如下：

#columnleft {
  float: left;
  width: 50%;
  text-align: center;
  background-color: #E8F8F5;
}

#columnright {
  float: right;
  width: 50%;
  text-align: center;
  background-color: #F4ECF7;
}

<div id="columnleft"> ..... </div>
<div id="columnright"> ..... </div>

我知道我需要像这样进行媒体查询

   @media screen and (max-width: 375 px)

但没有任何效果。最大尺寸是 1024 像素，只有这两个尺寸对这个项目很重要。中间什么都没有。我需要将两列堆叠在一起而不是并排

非常感谢任何建议，谢谢

Answer 1

使它们的宽度为 100%

@media only screen and (max-width: 357px) {
  #columnleft, #columnright {
    width: 100%;
  }
}