Differenza tra Px, EM, % in CSS ha spiegato

Il CSS offre una varietà di funzionalità per cambiare le dimensioni dell'elemento. Le più comuni tra queste unità sono PX, EM e %(percentuale). Per un novizio, sarebbe difficile capire la differenza tra questi, quindi praticano di più l'unità PX. Tuttavia, EM un %(percentuale) serve il comportamento reattivo degli elementi. Tenendo conto dell'importanza di tutti questi, questo articolo presenta una guida che fornisce la differenza tra PX, EM e %(percentuale).

Questo post dimostra la differenza tra PX, EM e %(percentuale). Inoltre, vorresti anche conoscere le lunghezze delle unità immobili e assolute e le loro differenze.

Qual è la differenza tra PX, EM e percentuale (%) in CSS?

In CSS, le unità di dimensionamento sono classificate in due categorie, la misura assoluta e relativa.

Unità assolute

Le unità assolute hanno valori fissi, quindi non cambiano i loro valori fino a quando l'utente non li cambia manualmente. IL Px L'unità rientra nella categoria assoluta di unità di dimensionamento in CSS. Sebbene PX non sia buono per la reattività, è ancora praticato dove gli elementi richiedono dimensioni fisse sullo schermo. Inoltre, il nuovo utente tende a utilizzare il Px come unità di dimensionamento in quanto è facile da gestire e non dipende da nessun altro unità o elemento di dimensioni.

Unità relative

Gli altri due Em E percentuale appartengono alla categoria relativa di elementi in quanto entrambi cambiano il loro comportamento per gestire la reattività.

Em: Questa unità si riferisce alla dimensione del carattere dell'elemento genitore/radice. Può anche essere utilizzato per la regolazione della larghezza/altezza ma il valore di 1em sarebbe 16px.

percentuale(%): L'unità percentuale mostra la rilevanza con l'elemento genitore.

Ad esempio, se un elemento genitore definisce il larghezza =10px". Ora, questo valore verrebbe preso come riferimento per associare la larghezza in percentuale.

Nota: CSS offre varie altre unità relative che includono REM, VW (Visualizza la larghezza della porta) e VWH (Visualizza l'altezza della porta) appartengono anche alla categoria relativa.

Esempio: usando PX, EM e valori percentuali

Il seguente codice HTML viene praticato per arrivare alla differenza tra PX, EM e valori percentuali.

Html

larghezza in %

Font-Size in Em

Nel codice sopra, ci sono elementi a due genitori (tag DIV) e ogni genitore ha un figlio. Il primo Div genitore contiene un paragrafo che eserciterebbe la larghezza in percentuale e il secondo Parent Div considera la dimensione del carattere dell'elemento.

CSS

Il CSS di cui sopra sarebbe il principale stakeholder nel dimostrare la differenza tra PX, EM e percentuale. La larghezza dei tag DIV è impostata su 250px, il che significa che sarebbe pari al 100%. Ad esempio, nel codice sopra il .per classe prende il 75% della larghezza totale (250px).

Allo stesso modo, la dimensione del carattere dei secondi elementi div è impostata su 12px, il che significa che 1em sarebbe uguale a 12px. Se il valore di EM viene modificato, cambierebbe rispetto al 12px (a partire dall'elemento genitore).

Produzione

Dall'output, si osserva che la larghezza dell'elemento figlio (paragrafo) è stata regolata al 75% dell'elemento genitore (Div). Inoltre, la dimensione del carattere è impostata su 2em, il che significa che sarebbe il doppio rispetto alla dimensione del carattere del suo elemento genitore (12px = 1EM).

Conclusione

IL Px appartiene alla categoria assoluta di unità di lunghezza mentre EM e %(percentuale) si riferiscono alla classe relativa delle unità di dimensionamento. Il valore di Px è risolto sul documento HTML ma il Em E %(percentuale) Dipende dall'unità utilizzata dall'elemento genitore. L'EM manipola principalmente la dimensione del carattere degli elementi HTML e l'unità percentuale (%) si riferisce principalmente alla modifica dell'altezza/larghezza di un elemento HTML (secondo l'elemento genitore). In questo articolo, avresti imparato le basi di varie unità come PX, EM e percentuale. Per una migliore comprensione, abbiamo dimostrato un esempio che chiarisce meglio la differenza tra tutte queste unità.