CSS Schriftgröße (responsiv), relativ zur Geräteauflösung?
Nehmen wir an, wir haben folgende test.htm :
Ich habe versucht, dies in Chromium mit den Entwicklertools zu testen, mit denen ich verschiedene Geräte emulieren kann; hier:
%Vor%Das Ergebnis ist das:
In diesem Beispiel sind alle Geräte im Hochformat und haben "fast" das gleiche Seitenverhältnis (~ 0,6+), selbst wenn sie sehr unterschiedliche Auflösungen haben.
Also, in den ersten beiden Fällen bekomme ich ungefähr die gleichen Schriftgrößen, im Verhältnis zur Bildschirmgröße des Geräts, was ich erreichen möchte (obwohl ich verwirrt bin, wie kann testdivB < em> auch zeigen fast die gleiche Größe, wenn es kleiner sein sollte - so ist das alles gut.
Aber im dritten Beispiel, das sich auf einem Gerät mit der größten Auflösung befindet, ist testdivB nicht überraschend (wie es in px definiert ist) im Vergleich zur Bildschirmgröße des Geräts viel kleiner; testdivA ist auch nicht wirklich überraschend, da em relativ zur "berechneten Schriftgröße" des Browsers ist - und das, wenn ich mich richtig erinnere, auch in Pixeln ausgedrückt wird.
Ich dachte jedoch, dass pt die Bildschirmauflösung des Geräts berücksichtigt hätte, aber es sieht so aus:
In der Vergangenheit hat CSS verlangt, dass Implementierungen absolute Einheiten auch auf Computerbildschirmen korrekt anzeigen. Da jedoch die Anzahl der falschen Implementierungen die richtigen übertraf und die Situation sich nicht zu verbessern schien, gab CSS diese Anforderung 2011 auf. Gegenwärtig müssen absolute Einheiten nur auf gedruckter Ausgabe und auf hochauflösenden Geräten korrekt funktionieren.
Ok, also welche Möglichkeiten habe ich, um in allen drei Fällen ungefähr die gleichen Schriftgrößen (wie bei den Bildschirmgrößen des Geräts) zu erreichen:
- Wenn ich kein JavaScript (nur HTML + CSS) verwenden möchte?
- Wenn ich JavaScript verwenden möchte (ich denke, es gibt eine Möglichkeit, nach dem Gerätebildschirm zu suchen - nicht Ansichtsfenster - Auflösung, aber ich bin mir nicht sicher, ob es wirklich eine gibt)?
3 Antworten
Ich habe vor einiger Zeit ein kleines Tutorial geschrieben, wie man das mit reinem HTML / CSS erreichen kann:
Responsive Einheiten ( vmin / vmax )
Die Regel vmin ist in Ihrem Kontext sehr nützlich. Es dauert vmin: 1/100 der kleinsten Seite Ihres Bildschirms. Unabhängig von der Ausrichtung. Kombiniert man sie mit der Basis-1em in calc() , können wir einen kleinen angepassten responsiven Aspekt auf font-size anwenden.
Alternativer Ansatz ( vw / vh )
Wenn Sie mehr Kontrolle über das tatsächliche Seitenverhältnis haben möchten, würde ich empfehlen, mit vw über vmin zu gehen. Die Ansichtsfensterbreite (vw) beträgt 1/100 der Breite Ihres Ansichtsfensters.
Responsive Einheiten basierend auf dem Ansichtsfenster-Seitenverhältnis (sowohl vmin als auch vmax ):
Ich bin ziemlich glücklich mit dieser Lösung. Auf diese Weise können wir sowohl die Breite der Ansichtsfenster als auch die Länge berücksichtigen. Wir teilen die Basisschriftgröße in zwei (.4em in diesem Fall) und multiplizieren sie mit 1vmin und 1vmax, danach fügen wir beide Werte hinzu, um die Schriftgröße festzulegen.
Ok, ich denke, ich kam zu einer Lösung, die ich verwenden kann, die JavaScript verwendet. Mit dem unten eingefügten Code erhalte ich das jetzt, wenn ich in verschiedenen Geräten in Chromium Developer Tools teste:
Wie man sieht, wird die relative Größe für das erste Div, .testdiv mit einer Angabe in em nun über die Gerätegrößen hinweg beibehalten (was ich wollte); px in der zweiten div, wie erwartet nicht die relative Größe beibehalten - und auch nicht der dritte Fall mit pt Spezifikation.
Das erste Problem, das ich hatte, war, wie man die Geräteauflösung erreicht. Beachten Sie, dass vw , vh - und somit vmin und vmax - in Bezug auf die Ansichtsfenster Größe, dh die Fenstergröße, sind. Dies ist im mobilen Bereich kein großes Problem, da die Browser auf Mobilgeräten in der Regel im Vollbildmodus gestartet werden (ich bin mir nicht einmal sicher, ob die Größe des Browser- / Anwendungsfensters auf Mobilgeräten, iOS oder Android geändert werden kann) ein Problem sein, wenn Sie einen Browser auf dem Desktop verwenden, bei dem der Browser möglicherweise nicht im Vollbildmodus angezeigt wird.
Glücklicherweise kann man die Geräteauflösung mit JavaScript erreichen, ( How um die Bildschirmauflösung mit JavaScript zu erkennen? ), und in diesem Fall erhalte ich die Breite und Höhe des Geräts in Pixeln - und daraus berechne ich devicemin als das kleinere der beiden (ähnlich wie vmin ). Dann habe ich eine "Basisschriftgröße", Schriftgröße des Elements <html> , auf 2,67% von devicemin (das war meine eigene willkürliche Wahl) in Pixel gesetzt. Das würde hoffentlich sicherstellen, dass ich die gleiche Schriftgröße im Verhältnis zur Geräteauflösung auf Geräten mit unterschiedlicher Auflösung habe.
Das zweite Problem, etwas unerwartet für mich, war, dass Sie müssen eine <meta name="viewport" content="width=device-width, initial-scale=1.0"/> entry / Direktive im Kopf haben! Andernfalls wird der iOS-Browser nur seine eigenen Schriftgrößen / Skalierungen anwenden, und wir erhalten daher ein unerwartetes Ergebnis wie:
Ich war in der Tat so überrascht von diesem Ergebnis in Chromium Developer Tools, dass ich den Test in einem Xcode iOS Simulator ausprobieren musste - und überraschenderweise simulierten die Chromium Developer Tools dieses Verhalten tatsächlich genauso wie der iOS Simulator (linkes Bild ist der Code unten in den Entwicklertools, rechts ist der OP-Code im iOS-Simulator). Weitere Informationen hierzu finden Sie unter Einige Schriftgrößen werden auf Safari (iPhone ) ...
Wie auch immer, jetzt, da ich die "Basis" -Schriftgröße wie diese habe, kann ich fortfahren und responsives Design auf der Basis der Breite & lt; 20em, & lt; 40em usw. implementieren - und sicher sein, dass diese Größen ungefähr gleich sind relativer Bereich auf jedem Bildschirmgerät ...
%Vor%