Ich habe diese Frage zu SO gesehen:
Was sind die häufigsten Schriftgrößen für H1-H6-Tags Dies ist die empfohlene Schriftgröße für H-Tags:
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
Gibt es eine "Best Practice" für diese Handys? -Say iPhone Bildschirmgröße?
Die Schriftgrößen in Ihrer Frage sind ein Beispiel dafür, in welchem Verhältnis die Kopfzeilen im Vergleich zueinander stehen sollten, und nicht von der Größe, in der sie sich selbst befinden sollen (in Pixeln).
Also als Antwort auf Ihre Frage "Gibt es eine" bewährte Methode "für diese Mobiltelefone? - sagen Sie die Bildschirmgröße des Iphone?", Ja, das ist wahrscheinlich der Fall - aber Sie finden vielleicht das, was jemand als "bewährte Methode" bezeichnet funktioniert nicht für Ihr Layout.
Damit Sie jedoch auf dem richtigen Weg sind, bietet dieser Artikel über das Erstellen responsiver Layouts ein gutes Beispiel für die Berechnung der Basis font-size
in Pixel in Relation zu den Bildschirmgrößen des Geräts.
Die in diesem Artikel vorgeschlagenen Schriftgrößen für Bildschirmauflösungen lauten wie folgt:
@media (min-width: 858px) {
html {
font-size: 12px;
}
}
@media (min-width: 780px) {
html {
font-size: 11px;
}
}
@media (min-width: 702px) {
html {
font-size: 10px;
}
}
@media (min-width: 724px) {
html {
font-size: 9px;
}
}
@media (max-width: 623px) {
html {
font-size: 8px;
}
}
Basierend auf meinem Kommentar zu der akzeptierten Antwort gibt es viele mögliche Fallstricke, auf die Sie stoßen können, wenn Sie Schriftgrößen kleiner als 12px
deklarieren. Indem Sie Stile deklarieren, die zu berechneten Schriftgrößen von weniger als 12px
führen, wie folgt:
html {
font-size: 8px;
}
p {
font-size: 1.4rem;
}
// Computed p size: 11px.
Sie haben Probleme mit Browsern wie Chrome mit einem chinesischen Sprachpaket, das alle unter 12px
berechneten Schriftgrößen automatisch als 12px
darstellt. Das Folgende ist also wahr:
h6 {
font-size: 12px;
}
p {
font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.
// How unpleasant of a surprise.
Ich würde auch argumentieren, dass Sie aus Gründen der Barrierefreiheit im Allgemeinen keine Größen unter 12px verwenden sollten. Sie können zwar einen Fall für Bildunterschriften und Ähnliches anführen, aber noch einmal - lassen Sie sich unter einigen Browser-Einstellungen überraschen und bereit sein, Ihre Oma zum Schielen zu bringen, wenn sie versucht, Ihren Inhalt zu lesen.
Ich würde stattdessen für so etwas entscheiden:
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.75rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
}
p {
font-size: 1rem;
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}
@media (min-width: 480px) {
html {
font-size: 13px;
}
}
@media (min-width: 768px) {
html {
font-size: 14px;
}
}
@media (min-width: 992px) {
html {
font-size: 15px;
}
}
@media (min-width: 1200px) {
html {
font-size: 16px;
}
}
Sie werden feststellen, dass TonnenvonSites , die sich auf die Barrierefreiheit konzentrieren müssen, ziemlich große Schriftgrößen verwenden, selbst für p
-Elemente.
Als Randbemerkung ist die Einstellung von margin-bottom
gleich font-size
normalerweise auch attraktiv, d. H .:
h1 {
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
Viel Glück.
Das Ganze ist, dass die Größe relativ zur Basis ist. Ich würde also sagen, dass Sie die Schriftgröße beibehalten können, indem Sie die Basis ändern.
Beispiel: Wenn Ihre Basis 16px ist und p 0,75em (was 12px ist), müssen Sie die Basis auf etwa 20px erhöhen. In diesem Fall würde p dann etwa 15px betragen, was das Minimum ist, das ich persönlich für Mobiltelefone benötige.