Media Queries für reaktionsfähige Typografie

Ich versuche einen Weg zu finden, meine Typografie ansprechbar zu machen. Mein Code wird folgen. Jedes Mal, wenn ich in Dev-Tools aktualisiere, scheint dies nicht das gewünschte Ergebnis zu haben. Wie kann ich ein gutes Ergebnis erzielen, wenn Text auf Smartphones, Tablets und Laptops/Desktops gut angezeigt wird?Media Queries für reaktionsfähige Typografie

@media only screen and (min-width: 320px) 
    { 
    html {line-height: 1.25em, font-size: 16px;} 
    h1{line-height: 1.25em, font-size:32px;} 
    h2{line-height: 1.15384em, font-size:26px;} 
    h3{line-height: 1.136363em, font-size:22px;} 
    h4{line-height: 1.111111em, font-size:18px;} 
    }

Quelle

2016-09-07 Quesofat

Haben Sie Ihr Viewport-Meta-Tag in Ihrem HTML-Code festgelegt?

<meta name="viewport" content="width=device-width, initial-scale=1">

Auch, warum verwenden Sie nicht REMs für dieses um es einfacher zu machen? Sie können die anfängliche HTML-Schriftgröße und Zeilenhöhe angeben und dann den REM-Wert für jede Abfrage ändern. Lesen: https://css-tricks.com/confused-rem-em/

Quelle

2016-09-07 14:23:06

Es gibt eine Reihe von Möglichkeiten, dies zu tun, und es beginnt mit dem Design. Wo entscheiden Sie, die Werte für Schriftgröße und Zeilenhöhe zu ändern? Was sieht gut aus und wann fängt es an schlecht auszusehen?

Wenn Sie das Browserfenster verbreitern und es schlecht aussieht, ist dies der Punkt, an dem Sie die Werte mithilfe von Medienabfragen oder Javascript ändern können. In der Tat gibt es eine Javascript-Bibliothek, die Ihnen hilft, solche Dinge zu tun (aber der Name entgeht mir im Moment).

So ist der Ort für den Webentwickler, um diese Medienabfragen zu erstellen, die die Werte zu dem ändern, was Ihnen, dem Designer, guttut.

Quelle

2016-09-07 14:45:33 Rob

Sie könnten die Funktion css calc verwenden.

font-size: calc(1em + 1vw);

Da sprachen über hier

https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/

Quelle

2016-09-07 16:29:40

Ich benutze rem statt em Auf meinen Projekten. Der Unterschied zwischen ihnen ist, dass rem immer auf die Wurzel des Dokuments, in diesem Fall html sucht.

Dann auf meinem css ich habe:

html { 
    font-size: 1rem; 

    @media (min-width: 320px) { 
     font-size: 1.2rem; 
    } 

    @media (min-width: 760px) { 
     font-size: 1.5rem; 
    } 
}

Auf diese Weise alle font-size innen <html> in der richtigen Art und Weise verändern wird.

Quelle

2016-10-17 16:02:35

Media Queries für reaktionsfähige Typografie

Antwort

Verwandte Themen