当 window 在 CSS 液体设计中收缩时，如何使我的 HTML 元素的列宽相等？

Question

我的代码在这个 fiddle: fiddle

我有两个 HTML 元素列：

<aside>This is the aside</aside>

<section>This is the section</section>

<aside> 占 <div id="wrapper"> 宽度的 33%，而 <section> 占 66%（<div id="wrapper"> 本身占打开互联网的 100% window 浏览器）。

当我缩小 window 时，我希望列以相等的列宽堆叠在彼此的顶部（这样就需要将每个列的宽度从 33%（或 66 %) 到 100%，当 window 缩小时）。

但是我在执行此操作时遇到了问题。

是否可以有另一个单独的 <div id="background1"> 和 <div id="background2"> 重叠在 <aside> 和 <section> 元素后面，并与它们一起更改宽度列作为背景？

我该怎么做？

感谢大家的帮助

Answer 1

您可以使用媒体查询

@media screen and (max-width: 430px) {
  aside, section {
    width: auto;
    float: none;
  }
  footer {
    padding: 10px 10px;
  }     
}

Answer 2

如果您以移动友好的方式编写媒体查询，那么您可以获得结果。

在媒体查询中定义宽度：

@media (min-width: 400px) {
  aside {
    width: 33%;
    float: left;
  }
  section {
    width: 66%;
    float: right;
  }
}

How can I make my HTML elements be equal column width when the window is shrunk in CSS liquid design?