Come modificare le dimensioni dei caratteri utilizzando le query multimediali

Un sito Web reattivo altera il suo aspetto a seconda del dispositivo su cui lo sta visualizzando. Ai fini di rendere reattivo un sito Web, utilizzare le query multimediali CSS. Queste domande consentono di modificare una caratteristica particolare del tuo sito Web in base alla larghezza o alla risoluzione dello schermo del dispositivo. Ad esempio, è possibile nascondere un elemento in base alla dimensione dello schermo o modificare la dimensione del carattere del contenuto del sito Web, ecc. Qui mostreremo come puoi modificare la dimensione del carattere del testo che appare sul tuo sito Web utilizzando le query multimediali.

Come modificare le dimensioni del carattere usando le query multimediali

Rendere il testo reattivo su un sito Web viene definito tipografia fluida, il che significa che il testo cambierà le sue dimensioni in base alle dimensioni dello schermo del dispositivo. Qui ti presenteremo due diversi metodi per rendere il testo del tuo sito Web reattivo.

Metodo 1

Il primo metodo che può essere utilizzato per rendere il tuo testo reattivo è usando le query multimediali. Ecco un esempio.

Html

Rendere il testo reattivo su un sito Web viene definito tipografia fluida, il che significa che il testo cambierà le sue dimensioni in base allo schermo
dimensione del dispositivo.

Qui abbiamo dichiarato un paragrafo su cui dimostreremo come cambiare le dimensioni del carattere usando una query multimediale.

CSS

P.testo
Background-color: Azure;
imbottitura: 15px;

Prima di tutto, stiamo usando alcuni CS di base per fornire un po 'di colore di sfondo e imbottitura al paragrafo.

CSS

@media Screen e (Min Width: 700px)
P.testo
Font-size: 25px;

La prima query applicata afferma che se la larghezza minima dello schermo è 700px o più larga, la dimensione del carattere del paragrafo sarà 25px.

CSS

@media Screen e (massimo-larghezza: 699px)
P.testo
Font-size: 16px;

E quest'ultima query afferma che se la larghezza massima dello schermo è 699px o minore, la dimensione del carattere del paragrafo sarà 16px o più ampia.

Produzione

Quando la larghezza dello schermo è 700px o più ampia.

Quando la larghezza dello schermo è 699px e minore.

La dimensione del carattere è stata modificata con successo usando le query multimediali.

Metodo 2

Il secondo approccio che puoi utilizzare per ridimensionare il testo è utilizzando la larghezza di visualizzazione. Usando questo il testo si alterà in base alle dimensioni del browser.

Html

Rendere il tuo testo reattivo

Rendere il testo reattivo su un sito Web viene definito tipografia fluida, il che significa che il testo cambierà le sue dimensioni in base allo schermo
dimensione del dispositivo.

Nel codice sopra, abbiamo definito un'intestazione e un paragrafo e applicheremo la larghezza di visualizzazione su questi per modificare le dimensioni del loro carattere rispetto alla finestra del browser.

CSS

H2
Font-size: 9VW;

Qui abbiamo impostato la dimensione del carattere dell'intestazione su 9vw. L'unità VW sta per la larghezza della vista.

CSS

P
Font-size: 4VW;

Per quanto riguarda la dimensione del carattere del paragrafo, la dimensione del carattere è stata impostata su 4VW.

Produzione

Il metodo funziona correttamente.

Conclusione

Ai fini di rendere il testo che appare sulle pagine Web reattivo, è possibile utilizzare le query multimediali. Nella query multimediale, specificare la dimensione del carattere del testo a qualsiasi larghezza particolare e la dimensione del carattere si alterà in base al tipo di dispositivo. Un altro metodo per eseguire questo compito è utilizzare la larghezza di visualizzazione. Questo metodo richiede semplicemente di assegnare una determinata dimensione del carattere al testo in unità "VW". Entrambi questi metodi sono stati discussi in questo post con l'aiuto di esempi pertinenti.