2

我正在尝试创建一个响应式网站，其布局如下

响应式页面的样机

  1. 在桌面上，有 2 列，第一列是介绍，第二列是登录表单（或主要内容），它们的高度相同
  2. 在较小的屏幕上，只有一栏，上面是主要内容，下面是介绍部分。

我创建了一个 DOM

<div class="page">
    <div class="welcome">
        <span>Welcome to my page</span>
    </div>
    <div class="main">
        <div class="header">
        </div>
        <div class="content">
        </div>
    </div>
</div>

我使用display:tableand display:table-cellfor Desktop 并且一切正常，但是我不知道如何在较小的屏幕上显示为模型

请给我任何建议。

4

1 回答 1

1

你一个用

1) Flexbox，反转列顺序。根据 caniuse.com [http://caniuse.com/#search=flexbox]的说法，它得到了不错的支持，也就是说，如果您对错过的 opera mini 用户感到满意，但请记住，它的全球使用率仅为 2.85%。

CSS

.page {
    display: flex;
    flex-direction: row;
    }

@media (max-width:500px) {
    .page {
        flex-direction: column-reverse;
        }
    }

演示：http ://dabblet.com/gist/7218862

关于 flexbox 的推荐阅读：http: //css-tricks.com/snippets/css/a-guide-to-flexbox/

2) Display: Table。这有更好的支持（http://caniuse.com/#search=display%3A%20table），甚至在 Opera Mini 版本 5 以后也支持。唯一的缺点是您需要在 .welcome 和 .main 周围有额外的包装器元素。付出的代价很小。

标记：

<div class="page">
    <div class='bottom'>
        <div class="welcome">
            <span>Welcome to my page</span>
        </div>
    </div>
    <div class='top'>
        <div class="main">
            <div class="header">
            </div>
            <div class="content">
            </div>
        </div>
    </div>
</div>

CSS：

@media (max-width: 500px) {
    .page {
        display: table;
        }
    .top {
        display: table-header-group; 
        }
    .bottom {
        display: table-footer-group;
        }
    }

演示：http ://dabblet.com/gist/7219553

这是一篇包含更多信息的文章http://www.mikitamanko.com/blog/2012/11/20/vertical-reordering-of-blocks-with-css-or-how-to-swap-two-elements-using- css/

于 2013-10-29T18:10:56.960 回答