0

我的网站需要大量的屏幕空间才能发挥作用。可以正常工作的最小宽度约为 1200 像素。问题是，当它在分辨率较低的屏幕（iPhone 或旧电脑）上打开时，页面无法完全融入屏幕并在左侧被剪切。

有谁知道我可以做什么而不是可以滚动？

我为整个页面使用 CSS 层

#page {
position:absolute;
left:50%;
width:1200px;
margin-left:-600px; 
}

然后在这一层里面我有实际的内容：

#content {
width:1200px;
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
color: #aaaaaa;
clear:both; 
margin-top:40px;
}

我知道原因可能是 margin-left: -600px 设置但是我如何确保整个内容块居中？还是我只需要将它与左侧对齐？

任何帮助将不胜感激！

PS - 该网站在http://texttexture.com上，这是我使用的 CSS：http: //texttexture.com/templates/styles.css

谢谢！

4

4 回答 4

5

试试这个：

#page {
    width: 1200px;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

绝对定位伴随着复杂性，通常仅在实际需要时才使用。

此外，似乎没有理由分开#page和#contentdiv。尝试删除#page和梳理它们：

#content {
    width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}
于 2012-06-27T10:56:59.330 回答
3

如果您确实希望分辨率较小的用户能够使用您的网站，那么您应该让它以较低的分辨率工作。有一些技术可以做到这一点。您链接到的网站看起来非常简单，因此更改某些样式应该不会太棘手。

您可能想查看响应式网页设计并在 CSS 中使用媒体查询。

于 2012-06-27T11:03:24.130 回答
1

You can also work with % like this.

#page {
    width: 100%;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}
于 2012-06-27T12:58:42.993 回答
0

“网站不适合您的窗口大小”-此问题的主要原因是在您的 css 文件中使用了 min-width 或 max-width 属性，检查并尝试删除任何不需要的 min、max-width 或 height 属性

于 2021-01-02T12:11:12.150 回答