全画面対応コンテナ

Question

100％高さと幅のコンテナがある場合は、解像度が互換性がない場合はコンテナ内の要素が圧縮されていることを意味します位置のデザイン応答可能な要素を内部に持つ応答性のあるコンテナを作成したいが、要素は圧縮されません。 （例要素がまだ同じで、stackoverflowのウェブサイトのサイズを変更してみてください。）

は、ここに私のコード例です：

.container { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: gray; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <h1>Responsive Container</h1> 
 
</div>

Answer 1

私があれば、実際に必要とされているかについてわかりません要素が特定の値よりも上または下に反応しないように制限する場合は、メディアクエリを使用して特定の画面値よりも幅が狭い/大きい場合は、コンテナ要素を固定ピクセル幅に固定する必要があります。 JSFiddleの下には、画面の幅が500pxなどよりも小さいときの要素が一定の幅（500px）に設定されていることが確認できて

.container { 
    height: 100%; 
    width: 100%; 
    background-color: gray; 
} 

h1 { 
    text-align: center; 
} 

@media only screen and (max-width: 500px) { 
    .container { 
    width: 500px; 
    } 
} 

：

はCSS Media Queries

CSSを参照してください。

JSFiddle Demo