2

背景画像の2つのdivで構成されるフローティング流体レイアウトで構成されるWebデザインを実行したいと思います。メインのコンテンツレイアウトが中央に配置され、メニューのレイアウトはオーバーラップしていますが、コンテンツdivの左側に比較的配置されています。

どうすればそれを流動的にし、どの解像度でも見ることができますか？どの最小/最大幅をお勧めしますか？

browser window -> 100%
====================
     backgrnd      |
   -------------   |
   |           |   |
 |--|          |   |
 |M | content  |   |
 |__|          |   |
   |-----------|   |
   |__footer___|   |
___________________|


body {
    margin:0; 
    padding:80px; 
    color:yellow; 
    background: url('image.jpg') no-repeat center center fixed; background-size: cover;
    font-size: 65%; 
}

背景は常に画面を占める必要があります

.centraldiv {
    max-width: 1000px;
    min-width: 775px;
    width: 90%;
    padding: 80px;
}

.menudiv {
    position: relative?
    width: 100px;       
}

私はうまくいっていますか？

編集：実際にそれを解決する必要はありません、私が良いアプローチを想定している場合は私を任命するだけです（流動的なレイアウトのために私が見つけるインターネットのすべての例は複数列であり、いくつかは中央パネルをまったく使用していません（あなたがいくつかのリソースを知っている場合これで十分です！）ありがとう！

4

2 に答える 2

2

優れたレスポンシブレイアウトを作成するには、パーセンテージを使用することが基本ですが（必須ではありません）、コンテンツを事実上すべての画面に適合させたい場合は、メディアクエリが明確に示されます。

また、レイアウトとテキストemの両方についてsで考え始める必要があります。

通常、すべてのコンテンツブロックがウィンドウの幅を埋めるシンプルなレイアウトから始める必要があります。スマートフォンの100pxメニューは、画面の約3分の1を占めます。

====================
     backgrnd      |
   -------------   |
   |   menu    |   |
   |-----------|   |
   |           |   |
   |  content  |   |
   |           |   |
   |-----------|   |
   |__footer___|   |
___________________|

単にそれらを保持しますdisplay:block;：

body {
    font-size: 62.5%; /* 62.5% = ~10px = 1em */
    margin:0; 
    padding:8em; 
    color:yellow; 
    background: url('image.jpg') no-repeat center center fixed; background-size: cover;
}
#centraldiv, #menudiv {
    padding:2em 0;
}

次に、メニューを左に移動するのに十分な水平方向のスペースが見つかるまで、ブラウザウィンドウをいじってみてください。

@media screen and (min-width:40em){
    #centraldiv {
        width:90%;
    }
    #menudiv {
        float:left;
        /* etc... */
    }
}

...等々。パーセンテージは問題ありませんが、それほど単純ではありません。

于 2012-10-18T13:59:37.553 に答える
2

メディアクエリについてのコメントは、進むべき道です。この例では、width、min-width、およびmax-widthを設定しましたが、これも正しくありません。％幅のみを使用して、1280pxを超えるデスクトップバージョンを設定します。次に、希望するデスクトップ幅より下、おそらく900ピクセルより下のメディアクエリのオーバーレイを開始し、その時点でステップダウンします。

続きを読む：Mozilla開発者：メディアクエリ-CSSトリック：メディアクエリ

編集：CSSトリックはレスポンシブレイアウトでもあります。ブラウザウィンドウで遊んでテストしてください。

于 2012-10-18T13:43:14.627 に答える