Come creare carattere reattivo in CSS
La reattività è un fattore essenziale nelle applicazioni Web. Gli sviluppatori realizzano progetti, immagini e div reattivo sulle pagine Web; Tuttavia, ci sono solo pochi che pensano di fare la reattività dei caratteri. Perché quando la pagina è passata da un dispositivo all'altro, ad esempio da desktop al cellulare, può disturbare la leggibilità dei caratteri. Per rendere visibili i caratteri, è necessario aggiungere il fattore di reattività.
Questo articolo spiegherà come creare caratteri reattivi usando CSS.
Come creare carattere reattivo in CSS?
Per creare un carattere reattivo in CSS, utilizzeremo i seguenti metodi:
-
- Unità di visualizzazione
- Query dei media
- Funzione CLAMP ()
Andiamo avanti ed esploriamo ogni metodo individualmente!
Metodo 1: utilizzando le unità di visualizzazione per creare caratteri reattivi in CSS
L'area visibile della pagina di un browser è conosciuta come una vista. In CSS, alcune unità sono correlate ad esso, a breve conosciute come "unità di visualizzazione". Queste unità sono utili per rendere le cose reattive e migliorare la visibilità rispetto a uno spettatore.
Ecco quattro unità di viewport descritte di seguito:
| Valori | Descrizione |
| VW | VW rappresenta la larghezza di visualizzazione. Rende gli elementi reattivi nelle maniere a larghezza riguardo a una pagina. L'1% della pagina è equivalente a 1VW. |
| VH | VH rappresenta l'altezza di visualizzazione. Rende gli elementi reattivi in maniere a livello di altezza riguardo a una pagina. L'1% della pagina è equivalente a 1VH. |
| vmin | VMIN rappresenta il minimo di ViewPort. Viene utilizzato per specificare l'altezza minima o la larghezza del Viewport rispetto a un elemento. |
| vmax | VMAX rappresenta il massimo di visualizzazione. Viene utilizzato per specificare la massima altezza o larghezza del Viewport rispetto a un elemento. |
Facciamo un esempio per riconoscere il funzionamento dell'unità di visualizzazione.
Esempio
Nel nostro file HTML, scrivi un po 'di testo all'interno del " Html Suggerimento Linux CSS Metodo 2: utilizzando query multimediali per creare caratteri reattivi in CSS In CSS, "query dei media"Aiuto ad applicare diverse condizioni di styling su elementi specifici. È un set di regole che può essere applicato solo se la condizione definita è vera. Nello sviluppo, le query dei media vengono spesso utilizzate per rendere reattivi elementi o progetti rispetto ai dispositivi/tipi multimediali. Quando la proprietà delle dimensioni del carattere viene inserita all'interno del set di regole @media, raggiunge i risultati desiderati. Esempio Imposta la larghezza minima della pagina come "799px"Usando"@media"E aggiungi il elemento all'interno di questo set di regole. Ciò indica che la regola definita verrà applicata solo se la larghezza della pagina è uguale o maggiore di 799px. Ora, specifica il "dimensione del font"Proprietà come"20px". Questo renderà il carattere più grande della sua dimensione normale. CSS Metodo 3: usando clamp () per creare caratteri reattivi in CSS IL "MORSETTO()"La funzione viene utilizzata per specificare un valore minimo e massimo fisso. In altre parole, è comunemente definito come un intervallo iniziale e finale per un valore specifico. La funzione Clamp () fornisce un grande controllo sugli elementi relativi alla loro reattività. Esempio Utilizzo "dimensione del font"Proprietà lungo il valore"morsetto (10px, 2.5vw, 30px)"Dove il 10px è il valore minimo, 30px è il massimo e il 2.5vw è il valore corrente del carattere selezionato. Questa funzione renderà il carattere reattivo sotto i limiti definiti. CSS Conclusione Per creare un carattere reattivo, "unità di visualizzazione","query dei media" O "Funzione CLAMP ()" può essere utilizzata. Esistono quattro unità di visione VW, VH, VMIN e VMAX che aiutano a creare caratteri reattivi. Inoltre, CSS @Media viene anche utilizzato per applicare diverse condizioni di styling a elementi specifici. La funzione di clemp () può anche essere utilizzata per rendere i caratteri reattivi. In questo articolo, abbiamo trattato come creare caratteri reattivi in CSS.
Nel file CSS, specificare il “dimensione del font"Proprietà con il valore"2.5vw". Questo renderà il carattere reattivo rispetto alla larghezza della pagina.P
Font-Size: 2.5VW;
Salva il tuo codice e provalo nel browser:@Media (Min-Width: 799px)
P
Font-size: 20px;
ProduzioneP
Font-size: morsetto (10px, 2.5vw, 30px);
Produzione
Abbiamo descritto tre metodi efficienti per creare un carattere reattivo in CSS.