画面解像度に合わせてWebページを修正します

Question

画面の解像度に合わせて調整しないWebページを設計しています。高解像度では正常に見えますが、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です：私はあなたがより小さなデバイスのスタイルでmediaqueriesを追加sugestう

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

。

モバイルデバイス用のページを設計することで、「モバイルファースト」に進むことができます。より大きいデバイスに追加のスタイルのメディアクエリを追加します。