响应式设计浮动标题，主要和旁边3种方式

Question

我有一个移动优先方法，有3个容器，应该填充3个不同布局的空间，如下图所示：

我越接近CSS就是：

HTML：

<header>...</header>
<aside>...</aside>
<main>...</main>

CSS

@media screen and (max-width: 480px) {
    header,
    main, 
    aside { width: 100%; }
}

@media screen and (max-width: 960px) {
    main { float: left; width: 60%; }
    aside {float: right; width: 40%; }
}

@media screen and (min-width: 961px) {
    header: { float: left; width: 60%; }
}

不幸的是，在第一个布局中，它将位于标题的正下方而不是主页的下方。可以在CSS中真正完成吗？我也开放了一个JavaScript解决方案。谢谢！

Answer 1

您可以使用css3媒体选择器：

@media screen and (max-width: 480px) {
    ...
}
@media screen and (min-width: 481px) and (max-width: 960px) {
    ...
}
@media screen and (min-width: 960px) {
    ...
}

CSS3 @ media Rule

Answer 2

您只需要为第一个布局重新排列HTML。这是针对3种布局的简单CSS解决方案。

＆＃13;

＆＃13;

* {margin:0;}
header {
  background: #eee;
}
main {
  background: #ddd;
}
aside {
  background: #ccc;
}
header,main,aside {
  min-height: 100px;
}
@media screen and (min-width: 481px) and (max-width: 960px) {
  main {
    float: left;
    width: 60%;
  }
  aside {
    width: 40%;
    float: left;
  }
}
@media screen and (min-width: 960px) {
  header, main {
    max-width: 60%;
  }
  aside {
    width: 40%;
    position: absolute;
    top: 0; right: 0;
    bottom: 0;
  }
}

＆＃13;

<header>header</header>
<main>main</main>
<aside>aside</aside>

＆＃13;

＆＃13;

＆＃13;