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而不是文章。任何寻找清洁和响应式样板的人我都会def。给这个人一个机会：https://github.com/thatcoolguy/gridless-boilerplate

Answer 2

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

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

Answer 3

在这里，使用显示表。

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

响应式设计和文章元素

3 个答案:

DEMO