javascript - 使用媒体查询切换元素

Question

我不知道从平板电脑访问网站时是否可以切换两个 HTML 元素。

现在我有以下设置:

<section id="content"></section><!-- End section#content -->
<aside id="sidebar"></aside><!-- End aside#sidebar -->

我想要的是，当您在平板电脑上查看网站时，内容部分上方的旁边位置，如下所示:

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

最好的解决方案是什么？一行简单的 CSS 还是我必须使用 Javascript 以及它应该是什么样子。

Answer 1

你可以通过css实现你想要的:默认情况下只 float #content 和 #sidebar 并在平板电脑模式下删除 float 。此外，您可以在平板电脑模式下设置 width: 100%。

看看我的 fiddle .

在平板电脑模式下按照您想要的方式排列 html:

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

和基本的 CSS:

#content {
    float: right;
    width: 700px;
    height: 200px;
}

#sidebar {
    float: right;
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 900px) {
    #sidebar, #content {
    clear: both;
    width: 100%;
   }
}

您还可以添加另一个媒体查询以在切换到具有相对宽度的平板电脑模式之前缩小桌面模式。例如像这个 alternative fiddle .