相対的ではあるが液体のレイアウトを持たない方法

Question

私はCSSで初めてで、ブラウザの画面サイズで変更することはできますが、液体ではない相対レイアウトの設計が可能かどうか疑問に思っています。

たとえば、ユーザーが画面ページを最小化すると、すべてが全画面と同じレイアウトになります。 これは可能ですが、私が持っているものは、フルスクリーンフォーマットで完全に動作する相対的なレイアウトですが、ユーザーが最小化またはページのサイズを変更すると、すべての写真とテキストも最小限に抑えられます。これはimg私のナビゲーションメニューにも影響します。ナビゲーションメニューは、ページのサイズを変更するとひどく見えます。私はそれを止める方法がありますか？

Answer 1

あなたが試みているように見えるのは、ブラウザの横にサイズが変更されないように、コンテナのサイズを最小限の幅に保つことです。これを実現するには、分の幅の CSSプロパティを使用できます。

<!-- Document --> 
<div id="site-wrapper"></div> 
<!-- Document --> 

プロパティは、CSS3メディアクエリを使用することができ、そのような

#site-wrapper { min-width: 1000px; /*For example*/ } 

Answer 2

として使用する必要があります。

http://www.w3.org/TR/css3-mediaqueries/

Answer 3

何のことをいっては、 "応答デザイン" と呼ばれています。

は、あなたがこの良い例（とも、ただ偉大な出発点を）したい場合は、http://twitter.github.com/bootstrap/

でブートストラップをチェックアウト上部にそのメニューを見て、そしてあなたが作るときに何が起こるか見てビューポートを小さくする（ウィンドウのサイズを変更する）。

EDIT：彼はそれが幅賢い「をサイズ変更する」が、賢明な高さをつぶしからの要素を保つことができます場合、私は彼が求めているものを

だと思い、です。彼のJSFiddleはパーセンテージの高さを使っていました。

.row_1 
{ 
    background-color: green; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:30px; 
    cursor: pointer; 
    z-index: 20; 
} 
.row_2 
{ 
    background-color: gray; 
    position: relative; 
    width: 100%; 
    height:100%; 
    padding: 30px 0px; 
} 

.row_3 { 
    background-color: black; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height:30px; 
    z-index: 20; 
    color: #fff; 
} 

更新されたJSFiddleは役に立ちますか？

http://jsfiddle.net/xBaTN/