根據屏幕分辨率修復網頁

我正在設計一個不根據屏幕分辨率自行調整的網頁。它在較高的分辨率下看起來不錯，但在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; 
}

來源

2012-03-12 user1263607

人們很難在沒有看到您網頁的HTML的情況下幫助您，因爲答案「取決於」您正在嘗試展示的內容以及您的HTML如何工作。 – jfriend00 2012-03-12 08:35:06

我會sugest你添加mediaqueries與樣式更小的設備。

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

甚至更好：通過爲您的移動設備設計頁面，進入「移動優先」。然後爲更大的設備添加具有額外樣式的媒體查詢。

來源

2012-03-12 08:39:18 StilgarBF

根據屏幕分辨率修復網頁

回答

相關問題