页面大小调整时页眉正在移动

我正在制作一个具有自适应设计的网站，以便它看起来不错，并且在不同的设备上调整好。页面大小调整时页眉正在移动

除了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%; 
    } 

}

到底哪里出问题了？

来源

2014-10-26 user2397282

你可以使用这样的事情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 */ 
    } 

}

来源

2014-10-26 14:51:35 pbaldauf

我相信这是因为20px填充，你正在向左边和右边的container应用填充。请试试这个CSS的响应部分：

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

    #container { 
     width: 100%; 
     padding: 20px 0px; 
    } 

}

来源

2014-10-26 14:48:44

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

问题是因为padding的width的是加入100%并填充，所以总width利用提高到100％+ paddingbox-sizing:border-box它给出padding/border从里面

在你的小提琴那里是水平卷轴，其中是因为padding和width

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

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

来源

2014-10-26 14:50:25

页面大小调整时页眉正在移动

回答

相关问题