1. Wenn du alle Inhalte sehen, oder selber eine Frage erstellen möchtest, kannst du dir in wenigen Sekunden ein Konto erstellen. Die Registrierung ist kostenlos, als Mitglied siehst du keine Werbung!

Bootstrap Website und auf Mac viel zu kleine Schrift

Diskutiere das Thema Bootstrap Website und auf Mac viel zu kleine Schrift im Forum Web-Design.

Schlagworte:
  1. Sonnenfrau

    Sonnenfrau Thread Starter Mitglied

    Beiträge:
    54
    Zustimmungen:
    0
    Mitglied seit:
    15.11.2017
    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;
    }
     
  2. MacMac512

    MacMac512 Mitglied

    Beiträge:
    4.548
    Zustimmungen:
    2.917
    Mitglied seit:
    12.09.2011
    Dafür benutzt man normalerweise dann MediaQueries um die verschiedenen Auflösungen sauber zu trennen. :)
     
  3. Sonnenfrau

    Sonnenfrau Thread Starter Mitglied

    Beiträge:
    54
    Zustimmungen:
    0
    Mitglied seit:
    15.11.2017
    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?
     
  4. MacMac512

    MacMac512 Mitglied

    Beiträge:
    4.548
    Zustimmungen:
    2.917
    Mitglied seit:
    12.09.2011
    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
     
  5. Difool

    Difool Frontend Admin

    Beiträge:
    9.877
    Medien:
    39
    Zustimmungen:
    4.582
    Mitglied seit:
    18.03.2004
    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)  { … }
    
     
  6. MacMac512

    MacMac512 Mitglied

    Beiträge:
    4.548
    Zustimmungen:
    2.917
    Mitglied seit:
    12.09.2011
    @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.
     
  7. phonow

    phonow Mitglied

    Beiträge:
    1.103
    Medien:
    4
    Zustimmungen:
    406
    Mitglied seit:
    13.07.2017
    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.
     
Die Seite wird geladen...
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite weitersurfst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...