フレキシブルまたはセンタリングされたページHTML CSS

Question

ユーザーの画面解像度が800 * 600の場合でも機能する、フレキシブルまたはセンタリングされたページデザインを使用する必要があります。私のページを小さくすると、要素は動いていて、その位置を変えています。フレキシブルまたはセンタリングされたページでは正常ですか？どうしたらいいのかな？

ページのCSSコード。

body { 
      margin-left: auto; 
      margin-right: auto; 
      text-align:center;} 

div.header { 
    padding-top: 1pc; 
    text-align:center; 
    width:100%; 
    color: #000000;} 

div.header h1 { 
color: #493831; 
padding-bottom: 30px; 
margin: 0;} 

div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%; 
    text-align:center; 
    background:#FBB117;} 
div.menu ul{ 
    font-size:14px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    width: 100px 
    padding:0; 
    display:inline-block;} 
div.menu li{ 
    display:inline; } 
div.menu li a{ 
    text-decoration:none; 
    padding:7px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff;} 
div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 


div.sidebar { 
    padding-top: 2pc; 
    margin-right: 15%; 
    margin-left: 15px; 
    text-align:center; 
    float: right; 
    width: 200px; 
    color: #000000; 
    list-style:none; } 
div.sidebar ul{ 
    font-size:14px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    padding:0; 
    list-style: none; 
    display:inline-block; } 
div.sidebar li{ 
    display:inline; } 
div.sidebar li a{ 
    text-decoration:none; 
    padding:10px 0; 
    width:100%; 
    background:#FBB117; 
    color:#4C4646; 
    float:right; 
    text-align:center; 
    border-bottom:1px solid #fff;} 
div.sidebar li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

div.content { 
    width:80%; 
    padding-top: 2pc; 
    text-align:left; 
    margin-left: 15%; 
    margin-right: 300px; 
    color: #000000 } 
div.content p { 
font-weight: lighter; 
color: #493831; 
padding-bottom: 30px; 
margin: 0;} 


div img.bw { 
    float:left; 
    margin-right:15px; 
    width:200px; 
    height:200px; } 

div img.map { 
    float:right; 
    margin-right:15px; 
    width:300px; 
    height:100px; } 

div.footer { 
    padding: 100px; 
    text-align:center; 
    height: 100px; 
    color: #000000 } 

Answer 1

サイズ制限を制限しようとすると、あなたのページで何が起こっているかを制御するための最良の方法は、解像度にサイトの件名を変更するには、別のスタイルシートを割り当てることです。これらは、異なる解像度でサイトにアクセスしているユーザー向けです。

http://css-tricks.com/resolution-specific-stylesheets/：リンクは、この問題は、長い時間のために多くの設計者を悩まており、バック90年代に流体レイアウトは、この問題を克服する必要があったすべての怒りだったとき

を提供します。

モバイルデバイスがWebページを表示するために開発され使用されるにつれて、モバイル版のサイトを作成する場合は、これも実行する方法です。

これで、使用可能なスペースを最大限に活用するために、ウェブページの全く新しいレイアウトを適用しています。また、ユーザーのブラウザがこの宣言をサポートしていない場合、ユーザーはサイトを見ることができます....誰もが勝者です。