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) {

甚至更好：第一次移动＆＃34;通过为移动设备设计页面。然后为更大的设备添加额外样式的媒体查询。

根据屏幕分辨率修复网页

1 个答案: