Frage CSS Schriftgröße (responsiv), relativ zur Geräteauflösung?


Nehmen wir an, wir haben folgendes test.htm:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.testdiv, .testdivB, .testdivC {
  width: 50%;
  height: 30%;
  margin: 6px;
  border: 2px solid gray;
  font-size: 4em;
}
.testdivB {
  font-size: 12px;
}
.testdivC {
  font-size: 30pt;
}
  </style>
</head>

<body>

  <div class="testdiv">Test one writing</div>
  <div class="testdivB">Test another writing</div>
  <div class="testdivC">Test three writing</div>

</body>
</html>

Ich habe es in Chromium mit den Entwicklertools getestet, mit denen ich verschiedene Geräte emulieren kann. Hier:

* Apple iPhone 4        : device resolution  320 x  480 , a/r 0.666667
* Google Nexus 10       : device resolution  800 x 1280 , a/r 0.625
* Amazon Kindle Fire HDX: device resolution 1600 x 2560 , a/r 0.625

Das Ergebnis ist folgendes:

chrome-test

In diesem Beispiel sind alle Geräte im Hochformat und haben "fast" das gleiche Seitenverhältnis (~ 0,6+), auch wenn sie sehr unterschiedliche Auflösungen haben.

Also, in den ersten beiden Fällen bekomme ich ungefähr die gleichen Schriftgrößen, im Vergleich zur Bildschirmgröße des Geräts, was ich erreichen möchte (obwohl ich verwirrt bin, wie das geht) testdivB  ebenfalls fast genauso groß, wenn es kleiner sein sollte - das ist alles gut.

Aber im dritten Beispiel, das auf einem Gerät mit der größten Auflösung ist, testdivB nicht überraschend (wie es in definiert ist px) ist im Vergleich zur Bildschirmgröße des Geräts viel kleiner; testdivA ist auch nicht wirklich überraschend, da em ist relativ zur "berechneten Schriftgröße" des Browsers - und dieser, wenn ich mich richtig erinnere, wird auch in Pixeln ausgedrückt.

Aber ich dachte das pt hätte die Bildschirmauflösung des Geräts berücksichtigt, aber es sieht so aus:

http://www.w3.org/Style/Examples/007/units.de.html

In der Vergangenheit erforderte CSS, 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 Geräten mit hoher Auflösung korrekt funktionieren.

Ok, also welche Möglichkeiten habe ich, um in allen drei Fällen annähernd die gleichen Schriftgrößen zu erreichen (wie bei Bildschirmgrößen):

  • Wenn ich kein JavaScript (nur HTML + CSS) verwenden möchte?
  • Wenn ich JavaScript verwenden möchte (ich denke, es gibt eine Möglichkeit, nach Gerätebildschirm zu suchen - nicht nach Ansichtsfenster - Auflösung, aber ich bin mir nicht sicher, ob es wirklich einen gibt)?

8
2017-12-09 13:59


Ursprung


Antworten:


Ich habe vor einiger Zeit ein kleines Tutorial geschrieben, wie man das mit reinem HTML / CSS erreichen kann:

Responsive Einheiten (vmin/vmax)

#small {
    font-size: calc(1em + 1vmin);
}

#medium {
    font-size: calc(1em + 2vmin);
}

#large {
    font-size: calc(1em + 3vmin);
}
<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

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. Kombinieren Sie es mit dem grundlegenden 1em in a calc() gibt uns eine gute Möglichkeit, einen kleinen kundengerechten Aspekt auf die font-size.

Alternativer Ansatz (vw/vh)

#small {
    font-size: calc(1em + 1vw);
}

#medium {
    font-size: calc(1em + 2vw);
}

#large {
    font-size: calc(1em + 3vw);
}
<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

Wenn Sie mehr Kontrolle über das tatsächliche Seitenverhältnis anwenden möchten, würde ich empfehlen, mitzugehen vw Über vmin. Die Ansichtsfensterbreite (vw) benötigt 1/100 der Breite Ihres Ansichtsfensters.

Responsive Einheiten basierend auf dem Bildseitenverhältnis (beide vmin und vmax):

#test1 {
    font-size: calc((.4em + 1vmin) + (.4em + 1vmax));
}

#test2 {
    font-size: calc((.4em + 2vmin) + (.4em + 2vmax));
}

#test3 {
    font-size: calc((.4em + 3vmin) + (.4em + 3vmax));
}
<div id="test1">Small text</div>
<div id="test2">Medium text</div>
<div id="test3">Large text</div>

Ich bin ziemlich zufrieden mit dieser Lösung, so können wir sowohl die Breite der Ansichtsfenster als auch die Länge berücksichtigen. Wir teilen die Basisschriftgröße in zwei (0,4em in diesem Fall) und multiplizieren sie mit 1vmin und 1vmax, danach fügen wir beide Werte hinzu, um die Schriftgröße festzulegen.


21
2017-12-09 14:02



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:

devtools-test-2

Wie man sehen kann, ist die relative Größe für das erste div, .testdiv mit einer Spezifikation in em jetzt wird über Gerätegrößen hinweg erhalten (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 bekommt. Beachten Sie, dass vw, vh - und somit vmin und vmax - sind in Bezug auf die Ansichtsfenster Größe, das heißt, die Fenstergröße. 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.

Zum Glück kann man die Geräteauflösung mit JavaScript erreichen, ( Wie erkennt man die Bildschirmauflösung mit JavaScript? ), und in diesem Fall bekomme ich die Breite und Höhe des Geräts in Pixel - und daraus berechne ich devicemin als der kleinere der beiden (ähnlich wie vmin). Dann habe ich eine "Basisschriftgröße", Schriftgröße der <html> Element, zu 2,67% von devicemin (das war meine eigene willkürliche Wahl) in Pixeln. Das würde hoffentlich sicherstellen, dass ich die gleiche Schriftgröße im Verhältnis zur Geräteauflösung über Geräte mit unterschiedlicher Auflösung habe.

Das zweite Problem, etwas unerwartet für mich, war, dass Sie Muss habe einen <meta name="viewport" content="width=device-width, initial-scale=1.0"/> Eintrag / Richtlinie im Kopf! Andernfalls würde der iOS-Browser nur seine eigenen Schriftgrößen / Skalierungen anwenden und somit ein unerwartetes Ergebnis erhalten:

devtools-ios-no-viewport

Ich war wirklich überrascht über dieses 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 genauso wie der iOS Simulator (links) Bild ist der Code unten in den Entwicklertools, rechts ist OP-Code in iOS-Simulator). Für mehr darüber, siehe Einige Schriftgrößen werden auf Safari (iPhone) größer dargestellt ...

Wie auch immer, jetzt, da ich die "Basis" -Schriftgröße wie diese habe, kann ich fortfahren und responsives Design basierend auf zB Breite <20em, <40em usw. implementieren - und sicher sein, dass diese Größen sich auf ungefähr den gleichen relativen Bereich auf jedem Bildschirm beziehen Gerät...

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- MUST have, so iPhone doesn't autozoom and change the fontsize! -->
  <script type="text/javascript">
  // https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript
  var devicewidth = window.screen.width;
  var deviceheight = window.screen.height;
  var devicemin = Math.min(devicewidth, deviceheight);
  // say we want base font size: 16px @ 600px (min of 800x600); 16/600 = 0.0266667
  var basefontsize = Math.round(0.0267*devicemin);
  // apply:
  var rootElement = document.documentElement;
  rootElement.style.fontSize = basefontsize;
  // report:
  console.log(navigator.userAgent);
  var report = "device res: " + devicewidth + " x " + deviceheight + " ; base font size: " + basefontsize + "/" + rootElement.style.fontSize;
  console.log(report);
  function reporter() {
    document.getElementById("dreport").innerHTML = report + "/" + document.documentElement.style.fontSize + " ... " + navigator.userAgent;
  }
  window.onload = reporter;
  </script>
  <style type="text/css">
body {
  /* https://stackoverflow.com/questions/3226001 ; no real need/effect in this case, though */
  -webkit-text-size-adjust: none;
}
.testdiv, .testdivB, .testdivC {
  width: 50%;
  height: 30%;
  margin: 6px;
  border: 2px solid gray;
  font-size: 4em;
}
.testdivB {
  font-size: 12px;
}
.testdivC {
  font-size: 30pt;
}
#dreport {
  font-size: 0.76em;
}
  </style>
</head>

<body>
  <div id="dreport"></div>
  <div class="testdiv">Test one writing</div>
  <div class="testdivB">Test another writing</div>
  <div class="testdivC">Test three writing</div>

</body>
</html>

1
2017-12-12 12:21



Sie können auch verwenden % Schild. Genau wie unten:

div.wrapper {
   font-size: 28px;
}
div.small {
   font-size: 80%;
}
div.big {
   font-size: 150%;
}
<div class="wrapper">
    <div class="small">Small text</div>
    <div class="normal">Normal text</div>
    <div class="big">Big text</div>
</div>


0
2017-12-09 14:09