使两列在html中响应 [英] making two columns responsive in html

问题描述

可能很简单.我已经制作了一个网页，现在需要它能够响应375px的移动设备；

Simple one probably. I've made a webpage and now need it to be responsive to a mobile at 375px;

在html中我添加了:

In the html I have added:

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

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

My two columns are named in the html as follows:

#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>

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

I know i need to make a media query like this

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

但是没有任何效果.最大尺寸为1024像素，只有这两个尺寸对此项目很重要.两者之间什么都没有.我需要两列相互堆叠，而不是并排

But nothing is working. The largest size is 1024 px only these two sizes matter for this project. Nothing in between. I need the two columns to stack up on top of each other rather than side by side

非常感谢任何建议

推荐答案

将其宽度设置为100％

make their width 100%

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

这篇关于使两列在html中响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！