1

以下は、ページレイアウトである私のコードです。しかし、ブラウザーのサイズを変更すると、変化し続けます。

どうすれば静的なページ レイアウトを作成できますか。

<head>
<style> 
body, html { margin:0; padding:0; } 

#wrap { width:100%; height:100%; } 

#header { width:100%; height:15%; text-align:center; border-bottom-style:solid; border-width:thin; background-color:lightyellow; } 

</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="header"> 
    <br><br><br> 
    <label for="tb2">textbox2</label><input type="text" name="tb2" size="30" maxlength="30" id="tb2"> 
    <input type="submit" name="search" value="search"> 
    </div> 
</div>
4

4 に答える 4

1

レスポンシブ デザインを使用して、サイトのスタイルを変更できます。たとえば、「フル サイズ」のディスプレイでは、メイン コンテナに 1000 ピクセルの幅が使用されます。iPad などの小さい画面サイズでは、幅を 600px に設定できます。モバイル デバイスは 300px を使用する場合があります。等...

あなたのcssでは、次のようになります...

#yourPageContainer{width:1000px;}
#otherElements{background-color:#afa;}

@media screen and (max-width:500px){    
    #yourPageContainer{width:500px;}
    #otherElements{background-color:#aaf;}
}

@media screen and (max-width:300px){
    #yourPageContainer{width:300px;}
    #otherElements{background-color:#faa;}
}

ここで重要なのは、画面サイズに基づいてコンテナーの絶対幅を設定することです。

ここでこの例を作成しましたhttp://jsfiddle.net/kxRtv/ - ブラウザウィンドウのサイズを変更して、何が起こるかを確認してください...

このサイトからインスピレーションが得られるかもしれません - http://mediaqueri.es/

于 2013-04-24T07:43:02.817 に答える
1

幅と高さのプロパティにパーセンテージを使用しないでください。代わりに絶対値 ( px、 など) を使用してください。em

#wrap { width:100px; height:100px; }

于 2013-04-24T06:54:53.827 に答える
1

%高さと幅を定義するために使用しているので、px代わりemに を使用します。使用する場合%は、ビューポートの解像度に相対的であるため、代わりに使用しpxます

<style>
div {
   width: 100px;
   margin: auto;
}
</style>

<div></div>
于 2013-04-24T06:55:06.177 に答える
0

以前に画面解像度の問題が発生しましたが、これで問題が解決しました。

  • 画面の解像度が変わるたびにウェブサイトを動的に変更したい場合は、すべてのページ、コンテナー、ラッパーなどに css で % を使用して、任意の画面解像度で調整できるようにします。(問題: 画面の解像度が大きいときはいつでも、これにより Web デザインが破壊されます)

  • 私がこれまでに見つけた最善の解決策は、幅を静的または固定 (.px または .em を使用) にして、ページを中央に配置することです。これにより、ページで作成したデザインが保持され、すべてがそのままの状態で表示されます。

    CSS で、ページ、コンテナ、ラッパーなどに次の行を追加するだけです。

    margin:0 auto;

    サイトはどの画面解像度でも中央に表示されます。その他の例と詳細については、このリファレンスHow to Center a Website With CSS を参照してください。実際の画面解像度を変更せずに別の画面解像度をテストしたい場合は、こちらで試すことができます。

    お役に立てれば ：）
于 2013-04-25T07:53:39.563 に答える