html - 根据屏幕分辨率修复网页

Question

我正在设计一个不根据屏幕分辨率自行调整的网页。它在较高分辨率下看起来不错，但在 1024x768 上，只有页面左侧可见。我试过将整个东西放在一个容器中并将其与中心对齐，但它不起作用。有什么出路？

这是一些 HTML:

<div id="layer-container" style="position:absolute; background-    image:url(images/bkgrd_final.jpg);">         
    <div id="info-layer" style="position: absolute; text-align: left; left: 0px; top: 2px; height: 747px; z-index: 48; display: block; margin:0 0 0 -285px;" title="">                     

这是一些 CSS:

div#container {
    position:absolute;
    margin:0 auto;
    text-align:left;
    overflow:visible;
}
body {
    font-size: 8px;
    line-height: 1.1875;
    text-align: center;
    margin: 0;
    background-color: #0C0C0C;
    background-repeat: repeat-x;
    background-position: center top;
    color: #000000;
    overflow-x:hidden;
}

Answer 1

我建议您为较小的设备添加带有样式的媒体查询。

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

甚至更好:通过为移动设备设计页面来“移动优先”。然后为更大的设备添加具有额外样式的媒体查询。