Bootstrap Website und auf Mac viel zu kleine Schrift

Sonnenfrau

Mitglied
Thread Starter
Dabei seit
15.11.2017
Beiträge
54
Reaktionspunkte
0
Hallo,
ich arbeite mit Bootstrap und habe diese auf "normalen Screen" - mein Laptop im Wohnzimmer hat nur 15" - 1366x768 und auf mobile Endgeräte wie Tablet und Phone optimiert, auf diese beiden kleinen Ports ist auch das Vergrößern der Schrift durch den User möglich, falls er mag. Die Seite sah eigentlich ganz gut aus, jetzt auf meinem neuen Mac mit Retina Display (4K) ist alles ziemlich klein. Die Schrift, die auf andere Geräte einigermaßen groß aussieht, ist auf dem Bildschirm klein, Header-Überschriften sind nicht fett, sondern wirken sehr dünn.

Hat jemand einen Tipp für mich, wie ich das css bearbeiten muss, damit es nicht nur auf die sonst üblichen Geräte gut aussieht, sondern auch auf größere Bildschirme?

Als Beispiel mein CSS für diese beiden Merkmale, die auf dem Mac sehr klein aussehen:

body {
line-height: 1.7em;
font-size: 14px;
font-weight: 400;
background-color: #f0f0f0;
color: #656565;
}
h4.subtitle {
font-size: 18px;
font-weight: 300;
color: #42969e;
margin-bottom: 10px;
line-height: 1.6;
margin-top: 20px;
border-bottom: 1px solid #d1d1d1;
}
 
Dafür benutzt man normalerweise dann MediaQueries um die verschiedenen Auflösungen sauber zu trennen. :)
 
Gibt es ein MediaQuerie für 4k?

Ich habe @media(min-width:1200px) + Änderung im css versucht, dann wird die Schrift zwar vergrößert, aber das ist mir zu früh, da die Änderung bereits auf meinem 15 Zoll Notebook greift. Kann ich min-width:4096px eingeben?
 
Lange her, dass ich mich damit auseinander gesetzt habe, aber an sich musst du die px Anzahl einfach auf was 4K mäßiges einstellen. Also wenn du von der Horizontalen denkst, liegst du bei 4K ja bei 3840, also versuche mal was ab 2560, dann ist zwar auch die 2560*1440 dabei, könnte aber nicht schaden
 
Gibt es ein MediaQuerie für 4k?

Ich habe @media(min-width:1200px) + Änderung im css versucht, dann wird die Schrift zwar vergrößert, aber das ist mir zu früh, da die Änderung bereits auf meinem 15 Zoll Notebook greift. Kann ich min-width:4096px eingeben?
Natürlich kannst du das.
Du solltest aber auch das Ausgabemedium zusätzlich dann angeben > in deinem Falle: only screen
Code:
@media only screen and (min-width : 4096px)  { … }
 
@Sonnenfrau : Ja kannst du. Wäre aber super nicht die Beiträge zu editieren, auf welche schon geantwortet wurde, weil dann nachfolgende antworten nicht komplett „bezuglos“ wären... ;)
Bzw Fragen noch ergänzen. Einfach antworten und noch die nächste frage stellen ist besser.
 
Es wurde mir schon vor 15 Jahren empfohlen und ich bin froh darauf gehört zu haben. Pixelangaben in Webseiten sind eine Sackgasse.
Versucht es mit em, pt, %, small/regular usw. Auf Dauer ist Pixel irrelevant.

Ich finde folgenden Artikel sehr gut:
LINK

Aber evt. schiesse ich auch am Thema vorbei, bin nicht mehr 100% in der Materie drin.
 
Zurück
Oben Unten