Ganzseitige responsive Container

Question

Ich habe 100% Höhe und Breite Container, bedeutet dann, wenn die Auflösung der jeder Bildschirm 100% ist, dann komprimiert die Elemente innerhalb des Containers, wenn die Auflösung in meinem Position Design nicht kompatibel ist Ich möchte einen Responsive-Container mit reaktiven Elementen darin haben, aber die Elemente werden nicht komprimiert. (Beispiel versuchen, die Stackoverflow Website, um die Größe, die Elemente sind immer noch die gleiche.)

Hier ist mein Beispielcode:

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

 
h1 { 
 
    text-align: center; 
 
}

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

Answer 1

Ich bin nicht sicher, was tatsächlich benötigt wird, wenn Wenn Sie verhindern möchten, dass die Elemente oberhalb oder unterhalb eines bestimmten Werts reagieren, müssen Sie das Containerelement auf eine feste Pixelbreite festlegen, wenn die Breite unter Verwendung von Medienabfragen kleiner/größer als der bestimmte Bildschirmwert ist.

Siehe CSS Media Queries

CSS:

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

h1 { 
    text-align: center; 
} 

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

In der unten JSFiddle können Sie auf feste Breite sehen, dass sich die Elemente gesetzt (500px), wenn die Bildschirmbreite kleiner als 500px ist.

JSFiddle Demo