Πώς να δημιουργήσετε: Απάντακτο κείμενο

Απάντακτο μέγεθος γραμματοσειράς

Το μέγεθος του κειμένου μπορεί να χρησιμοποιηθεί vw Η ρύθμιση μονάδας, η οποία σημαίνει "διάσταση του οπτικού πεδίου".

Όπως αυτό, το μέγεθος του κειμένου θα ακολουθεί το μέγεθος του παραθύρου του προγράμματος περιήγησης:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης, και δείτε πώς αλλάζει το μέγεθος του γραμματοσειράς.</p>

Δοκιμάστε το شخصικά

Σημείωση:Το οπτικό πεδίο είναι το μέγεθος του παραθύρου του προγράμματος περιήγησης.1vw = Το 1% της διάστασης του οπτικού πεδίου. Αν η διάσταση του οπτικού πεδίου είναι 50 εκατοστά, τότε 1vw Για 0.5 εκατοστά.

Αλλάξτε το μέγεθος του γραμματοσειράς με ερώτηση μέσων

Μπορείτε επίσης να χρησιμοποιήσετε την ερώτηση των μέσων για να αλλάξετε το μέγεθος του γραμματοσειράς στο συγκεκριμένο μέγεθος οθόνης:

Ελέγξτε την απόδοση

/* Αν η διάσταση της οθόνης είναι 601px ή μεγαλύτερη, ρυθμίστε το font-size του <div> σε 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Αν η διάσταση της οθόνης είναι 600px ή μικρότερη, ρυθμίστε το font-size του <div> σε 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Δοκιμάστε το شخصικά

Σχετικές σελίδες

Εκμάθηση:Γραμματοσειρά CSS

Εκμάθηση:Ερωτήματα πολυμέσων CSS