CSS - Medienabfrage reagiert Design - gleiche Höhe aber Breite erhöht

Question

Ich arbeite an Responsive Design. Mein Ziel ist es, meine Website für alle Größen ansprechend zu gestalten.

Im Allgemeinen nehme ich die Schriftgröße meiner Elemente als die Breite des Geräts erhöht.

Aber was ist, wenn die Breite zunimmt und die Höhe gleich bleibt? Ich habe über dieses Szenario nachgedacht und gleichzeitig ein responsives Design erstellt.

ex: 400x300 500x300 600x300

In diesem Szenario als Breite zunimmt ich die Schriftgröße zu erhöhen. Aber die Höhe bleibt gleich, was zu übergroßen Elementen führt, weil die Höhe gleich bleibt, wenn die Schriftgrößen erhöht werden.

Answer 1

Ich benutze diese:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Hoffe, es hilft!

Answer 2

So wie andere Benutzer gesagt haben, bevor, was Sie zuerst tun möchten, ist dieses Meta-Tag im HTML-Header enthalten:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

dann würden Sie Ihre CSS-Datei gehen und eine bestimmte veiw Größe auswählen.

@media (min-width:300px) and (max-width:400px){ 
    .myClass{ 
     height: 18em; 
     font-size: 1em; 
    } 
    } 

Diese @media ermöglicht die CSS nur ausgeführt werden, wenn das Ansichtsfenster innerhalb des angegebenen Bereichs, in diesem Fall zwischen 300px und 400px ist. Sie können es wie jede normale CSS-Änderung behandeln, Höhe, Schriftgröße, Farbe, Hintergrund usw. ändern. Denken Sie daran, Ihr @media mit geschweiften Klammern zu öffnen und zu schließen, genau wie Sie es bei der Auswahl eines Elements in CSS tun würden.