Question

我的网站在我的分辨率下看起来很好，甚至在更常见的1024 x 768中。但是，在其他人的1024 x 768浏览器中，它太宽了，网站甚至没有正确居中。

有没有办法让合适的宽度布局在分辨率发生变化时不会改变？

/* Body */
body {
    background: #535353;
    font-family: Arial;
    font-size: 12px;
    color: Black;
}

form {
margin:0;
padding:0;
display: inline
}

* {
    margin: 0;
    padding: 0;
}

/* Header */
#header {
    margin-left: 100px;
    margin-right: 100px;
    overflow: hidden;
}

/* Logo */
#logo 
{
    background-color: White;
}

/* Menu */
#menu {

    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0 0 0 0;
    text-align: left;
    background-color: #AB0000;
    font-size: 14px;
    color: White;
    font-weight: bold;
}

#menu a {
    font-size: 14px;
    color: White;
    font-weight: bold;
}

#menu a:hover {
    color: Yellow;
}

/* Spacer */
#spacer {   
    background-color: #8C8C8C;
}

/* Sidebar */
#sidebar {       
    margin-left: 100px;
    margin-right: 100px;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
    background: url(Images/leftborder.jpg) repeat-x left top;
    background-color: #C2C2C2;
}

#sidebar p {
    color: Black;
    font-weight: normal;
    font-size: 11px;
}

#sidebar a{
    color: Black;
    font-weight: normal;
    font-size: 11px;
}

/* Quick Links */
#quicklinks a{
    color: White;
    font-size: 12px;
    font-weight: bold;
    text-decoration:none
}

/* Content */
#content {
    margin-left: 200px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #C2C2C2;
}

#content p {
    font-size: 12px;
}

#content a{
    color: Black;
    font-weight: bold;
}

/* Gallery */
#gallerylinks{
    border-color:Black; 
}

/* Footer Space */
#footerspace {
    background-color: #AB0000;   
}

/* Footer */
#footer {
    width: 891px;
    height: 70px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0 0 0 0;
    text-align: center;
    background-color: #C2C2C2;
    font-weight: bold;
    color: Black;
}

#footer a {
    font-weight: bold;
    color: Black;
}

#footer a:hover {
    color: Yellow;
}

Answer 1

如果您不希望宽度随分辨率/浏览器大小而变化，则在CSS中使用绝对宽度而不是百分比（860px而不是90％）。

然而，如果它在某些浏览器中看起来不同，可能是因为它们的字体和字体大小不同。

Answer 2

通常，您希望布局设计适应用户的屏幕分辨率。您可以通过将容器宽度设置为百分比来完成此操作。显然应该为容器而不是图像设置。

Answer 3

如果布局在不同的计算机上发生变化，则可能是因为

使用其他浏览器和/或操作系统
浏览器窗口在其中一台计算机上调整大小
打破布局的不同文字大小（IE中的文字大小调整会这样做）
您的标记和CSS代码充满了错误。

小心发布一些代码？

Answer 4

您有两种选择：

调整布局，使其以百分比单位正确渲染;调整浏览器窗口的宽度以进行测试
使用长度单位（例如像素）而不是百分比单位

确保在多个浏览器中进行测试，因为它们解释CSS规则的方式通常会有微妙的变化。还可以考虑使用CSS重置库来简化这一过程。

Answer 5

基于浏览器的应用程序是桌面上的访客！你不能假设像屏幕分辨率这样的东西。您必须以尽可能多的方式测试您的应用。此外，使用Google的BrowserSize http://browsersize.googlelabs.com/或FF的WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60/等工具，可以查看不同屏幕尺寸的浏览器应用。

Answer 6

另外，如果这个人的宽屏显示器运行在1024x786，这会让事情看起来有点奇怪。

Answer 7

这是关于正确居中的。

如果没有HTML，有点难以弄清楚到底发生了什么，但我真的没有看到任何可以集中体现的CSS。

在CSS中居中的诀窍是你想要一个项目的左右两侧有相同的空间，但由于你不知道用户的窗口有多大，你不知道这有多大空间将是。解决方案是使用margin：0 auto;

如果你猜测左边和右边距的大小是为了居中，那么你通常会得到一个你指定的左边距和一个右边距，这取决于用户的窗口大小，所以事情看起来不会如果窗口大小超过一定量，则居中。

以下是示例页面上的部署：

CSS：

#page {
    /* 
       width must be specified or the div will take up all the horizontal 
       space it can (can be ems, %, whatever)
    */
    width:860px;
    /* 
       Top and bottom margins are zero. 
       Left and right are automatically the same. 
    */
    margin:0 auto;
}

HTML

<div id="page">
    <h1>Something interesting</h1>
    <p>Something enthralling</p>
</div>

Answer 8

我最终在1024X768中重新设置了网页。然后一切都解决了所有其他决议。

监视分辨率会改变网站的外观

8 个答案: