css - 响应式设计和文章元素

Question

我有一个页面，包含三个部分。每个部分都是一个占据整个页面视图的部分。我希望文章和背景适合移动设备屏幕，就像在桌面上一样，但不知道如何调整文章。这是一个小提琴：http: //jsfiddle.net/kRjUn/

这是CSS：

html {
    height: 100%;
    }

body {
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
}

article {
    height: 100%;
    padding-top: 2em;
    }
.wrapper {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: inherit;
    }

.content {
    margin-top: 25em;
    height: inherit;
    }

Answer 1

我找到了这个无网格样板，并将车身高度设置为 100%，它似乎工作得很好。我也只是使用了一个 div 而不是文章。任何寻找干净且响应迅速的样板的人我都会定义。试一试：https ://github.com/thatcoolguy/gridless-boilerplate

Answer 2

我觉得你的代码不是为每个设备处理案例，你需要使用可以帮助你的 CSS 3 媒体查询功能。

我认为您可以使用HTML5 样板模板作为示例。

Answer 3

给你，使用显示表。

article {
   height: 100%;
   padding-top: 2em;
   display: table;
}
.wrapper.content { 
    padding: 2em; 
    display: table-cell;
} 

演示