Question

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

Mockup for responsive page

在桌面上，有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:table和display:table-cell用于桌面，一切运作良好，但我不知道如何在较小的屏幕上显示作为样机

请给我任何建议。

Answer 1

你使用

1） Flexbox ，以反转列顺序。根据caniuse.com [http://caniuse.com/#search=flexbox]的说法，它得到了不错的支持，即如果你对歌剧迷你用户的错失感到满意，但请记住它的全球使用率只有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），甚至从版本5开始支持Opera Mini。唯一的缺点是你需要额外的包装元素.welcome＆amp; 。主要。要付出很小的代价。

标记：

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

在响应式页面上需要您的帮助

1 个答案: