Question

我正在建立一个响应式设计的网站，以便它看起来仍然很好，并且可以在不同的设备上很好地调整大小。

除了h1文本外，一切运作良好。我有一个固定宽度为800px的容器，在适当的屏幕尺寸下，宽度变为100％。标题文本居中，但是，当屏幕尺寸发生变化且容器变为100％宽度时，标题现在偏离中心，稍微向右移动。

这是我的HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Home</title>
    </head>
    <body>
        <div id="container">
            <h1>My Website!</h1>
        </div>
    </body>
</html>

我的CSS：

* {
    font-family: Helvetica Neue;
}

body {
    background-color: gray;
    margin: 0;
}

h1 {
    text-align: center;
}

#container {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
}

/* Resizability (Responsive Web Design) */

@media screen and (max-width: 840px) {

    #container {
        width: 100%;
    }

}

出了什么问题？

Answer 1

您可以使用类似Fiddle的内容。

添加max-width: 100%和width: auto属性，例如：

<强> CSS

@media screen and (max-width: 840px) {

    #container {
        max-width: 100%;
        width: auto;
        border: 1px solid red; /*only for demonstration */
    }

}

Answer 2

我相信，由于您20px填充了您在左侧和右侧container应用的@media screen and (max-width: 840px) { #container { width: 100%; padding: 20px 0px; } }填充。请尝试使用此CSS作为响应部分：

{{1}}

Answer 3

演示 - http://jsfiddle.net/victor_007/6d8296ag/2/

问题是由于padding width为100%而且还添加了填充，因此总width增加到100％+ padding使用box-sizing:border-box从内部提供padding/border

在你的小提琴中有水平卷轴，因为padding和width

使用box-sizing:border-box进行响应式设计非常重要

* {
    font-family: Helvetica Neue;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

页面调整大小时正在移动标题

3 个答案: