Skalierung eines Weblayouts mit dem Ansichtsfenster

Question

Ich bin mir der CSS 3-Einheiten bewusst vw , vh y vm die nützlich zu sein scheinen, um Elemente zu erstellen, deren Rahmengröße und Textgröße sich an der Größe des Browserfensters orientiert. Leider werden diese jedoch von den aktuellen großen Browsern nicht gut unterstützt; nur Internet Explorer 9+ unterstützt sie.

Welche anderen Methoden kann ich verwenden, um Dinge wie CSS font-size Eigenschaften, die mit dem Ansichtsfenster skalieren? Ich würde gerne JavaScript und/oder jQuery-Lösungen vermeiden, wenn möglich.

Answer 1

Eine zu 100 % skalierbare Website zu erstellen ist möglich. Wie Rev sagte, kann man dies mit Hilfe von Prozentwerten erreichen, aber es ist schwierig.

Die bessere Option ist die Verwendung von @media queries . Mit diesen können Sie CSS-Regeln auf eine Seite anwenden nur unter bestimmten Bedingungen. Durch die Verwendung von Media-Queries zur Erkennung der Gerätebreite und/oder der Seitenbreite können Sie eine Feinabstimmung darüber vornehmen, wie Ihre Website bei verschiedenen Viewport-Größen aussieht. Zum Beispiel:

@media screen and (max-device-width: 960px) {
    font-size:14px;
}
@media screen and (max-device-width: 480px) {
    font-size:13px;
}

Nun ist das obige Beispiel eher trivial und konstruiert. Für ein tieferes Verständnis dessen, was Sie mit Media Queries erreichen können, empfehle ich Ihnen, sich die W3C-Spezifikationsseite . Einige der mächtigsten sind die width , min-device-width , max-device-width , portrait|landscape et print Rückfragen.

Nebenbei bemerkt, stellen Sie sicher, dass Sie diese Stile am Ende Ihres CSS einfügen, damit sie nicht von den Standardstilen überschrieben werden.