Wie ändere ich die Textgröße in Bezug auf das Fenster in HTML?

Ich mache eine Webseite in Google Sites und stoße auf ein scheinbar häufiges Problem. Wie verkleinere ich die Textgröße, wenn das Fenster kleiner wird? Ich bin sehr neu in HTML, so brauche ich eine einfache Antwort mit einigen Beispielcode. Ich bin mir nicht sicher, aber ich denke, dass Google Sites nur HTML erlaubt. Leider kann ich nicht mehr als den folgenden Code anhängen, der hoffentlich reicht:Wie ändere ich die Textgröße in Bezug auf das Fenster in HTML?

<font color="#000000" face="georgia, serif" size="4"><span style="line-height:40px">This is code</span></font>

Quelle

2016-04-11 The Eye

Sie werden nicht erreichen, was Sie wollen mit HTML allein. Ich würde sagen, dass Sie entweder JavaScript oder CSS Media Queries verwenden müssen, aber Korgrues Antwort wäre meiner Meinung nach der richtige Weg. –

Verwenden der VW CSS-Eigenschaft.

Beispiel:

p {font-size: 4vw;}

nur zuverlässig auf HTML5 kompatiblen Browsern funktioniert.

Spec:https://developer.mozilla.org/en-US/docs/Web/CSS/length

1VW = 1/100stel Darstellungsbreite. Passen Sie den Wert vor dem vw an, um die Größe der gewünschten automatischen Skalierung für Ihren Typ anzupassen.

Bearbeiten: Wie andere bemerkt haben - Sie können auch Media-Abfragen verwenden, aber die Skalierung ist nicht glatt und wird zu jeder neuen Schriftgröße an jedem Unterbrechungspunkt springen. Dies ist in Ordnung für Bodycopy, wo genaue Kontrolle über die Schriftgröße gewünscht wird. Wenn Sie jedoch eine proportionale Skalierung für alle Darstellungsfeldgrößen und nicht nur für vordefinierte Haltepunkte wünschen, verwenden Sie VW.

Quelle

2016-04-11 16:18:13 Korgrue

Schön. Ich bin hauptsächlich ein Server Side Dev und kannte VST nicht. Immer gut, um etwas Neues zu lernen. –

Sie sollten CSS Media Queries werden:

@media only screen and (min-width: 768px) { 
    /* tablets and desktop */ 
    font-size: 16pt; 
} 

@media only screen and (max-width: 767px) { 
    /* phones */ 
    font-size: 12pt; 
} 

@media only screen and (max-width: 767px) and (orientation: portrait) { 
    /* portrait phones */ 
    font-size: 18pt; 

}

, wenn Sie nicht wissen, wie eine CSS-Datei hinzufügen, die Sie in diesem Link lesen:

Adding Css file

Quelle

2016-04-11 16:20:26 raven

Zwei Tipps:

1) Verwenden Sie die relative Schriftgröße, verwenden Sie em. em legt die relative Einheit basierend auf dem berechneten Wert der Schriftgröße des übergeordneten Elements fest. z.B.

2) Für eine spezifischere Schriftart fügen Sie zusätzliche Medienabfragen basierend auf der Bildschirmgröße hinzu.

Ich hoffe, das hilft

Quelle

2016-04-11 16:52:12 user1368695

Wie ändere ich die Textgröße in Bezug auf das Fenster in HTML?

Antwort

Verwandte Themen