Schriftgröße an Auflösung definieren bzw. automatisch anpassen

    Hallo,
    ich möchte die Überschrift H1 abhängig von der Auflösung “Responsive…” machen. Nun habe ich in der Child-Style.css einige Angaben wie folgt gemacht:

    Media screen and (min-width: 768px) {
    #content .page .entry-header h1.entry-title {
    font-family: ‘Zapfino Extra LT W01’, Trebuchet MS;
    font-size: 1.0rem;
    color: #be4948;
    }
    }
    Media screen and (min-width: 1024px) {
    #content .page .entry-header h1.entry-title {
    font-family: ‘Zapfino Extra LT W01’, Trebuchet MS;
    font-size: 1.2rem;
    color: #be4948;
    }
    }
    Media screen and (min-width: 1180px) {
    #content .page .entry-header h1.entry-title {
    font-family: ‘Zapfino Extra LT W01’, Trebuchet MS;
    font-size: 1.4rem;
    color: #be4948;
    }
    }
    Die Größendefinitionen funktionieren im Browser; wenn ich jedoch die URL auf meinem Smartphone mit Chrome öffne, dann wird weder die Schriftart noch die Größe berücksichtigt.
    Wie kann ich dies am besten lösen?
    Ich habe auch schon mit px gearbeitet- hat auch nichts gebracht.
    Wäre für eine Hilfestellung dankbar...

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    kontrolliere mal die Hochkomata


    HTML
    ‘Zapfino Extra LT W01’,

    das sind nämlich keine

    und die Schriftart gibt es?

    zur Sicherheit würde ich beim Testen auch die Schriftfarbe ändern ...
    dann siehst du es sofort was wo greift oder nicht ...

    Zitat von StefanTr

    Die Schriftart gibt es - mit dieser hängt es nicht zusammen. Es hat ja zuvor auch auf allen Plattformen mit dem Font funktioniert.


    Media screen and (min-width: 768px) {

    das ist die kleinste Pixelangabe

    wieviel PX zeigt dein Smartphone an?

    die Hochkomata bei der Schrift => die kontrolliert
    mal die Schriftfarbe ändern bei min-width: 768...
    ändert sich da nichts, dann ist dein Smartphone nicht min-width 768...

    Hallo,

    a) Wie bereits erwähnt entweder Hochkommata ' oder double quotes " verwenden.
    b) Wenn Du die Schriftgröße schon in root em angibst, warum willst Du diese dann zusätzlich in den media queries neu definieren?
    c) rem bezieht sich immer auf der Root-Element. Wenn dieses sauber eingerichtet ist, muss keine zusätzliche Deklaration in den media queries erfolgen.
    d) In den media queries definiert man nur die Dinge, die sich auch tatsächlich ändern. Die Schriftart kannst Du Dir an der Stelle sparen. ;)
    e) Du solltest zusätzlich die Schriftgröße in Pixeln angeben, sofern ein Fallback für IE8 oder älter erwünscht ist.

    Ein gutes Beispiel ist beim Underscores-Theme von Automattic zu finden: https://github.com/Automattic/_s/blob/master/style.css

    PS: Der Umrechnungsfaktor von Pixeln in rem ist 16.

    Hallo zusammen,
    also ich betrachte die Site auf meinem Samsung S4 und dieses macht eine Auflösung von 1080px.
    Ich habe nun mal die Schriftart auf Courier geändert und mit der Größenangabe auch mit px-Werten gespielt.
    Sowohl die Änderungen der Schriftart noch der versch. Größenangaben spielen eine Rolle - das Handy zeigt immer eine einzige Schriftart an und auch immer nur eine Größe

    Lasse ich den ganzen Absatz mit " Media screen and (min-width: ...px) ..." weg, dann wird mir ja der Zapfino-Font überall (auch auf dem Handy) angezeigt - nur eben in der Größe viel zu groß.
    Werd jetzt bald verrückt

    Irgendwie habe ich das Gefühl, dass Smartphones die Angaben zu Media screen and (min-width: 768px) {.... überhaupt nicht auswerten. Egal was ich dort deklariere.
    Hat da jemand einen Tip?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden