Forskjell mellom PX, EM, % i CSS forklarte

CSS tilbyr en rekke funksjonaliteter i å endre størrelsen på elementet. De vanligste blant disse enhetene er PX, EM og %(prosent). For en nybegynner ville det være vanskelig å forstå forskjellen mellom disse, og de praktiserer PX -enheten mest. Imidlertid tjener EM en %(prosentandel) den responsive oppførselen til elementer. Når du viser viktigheten av alle disse, presenterer denne artikkelen en guide som gir forskjellen mellom PX, EM og %(prosent).

Dette innlegget viser forskjellen mellom PX, EM og %(prosent). Dessuten vil du også bli kjent med eiendommer og absolutte enhetslengder og deres forskjeller.

Hva er forskjellen mellom PX, EM og prosent (%) i CSS?

I CSS er størrelsesenhetene klassifisert i to kategorier, det absolutte og det relative tiltaket.

Absolutte enheter

De absolutte enhetene har faste verdier, og endrer derfor ikke verdiene sine før brukeren endrer dem manuelt. De PX Enheten faller inn under den absolutte kategorien dimensjoneringsenheter i CSS. Selv om PX ikke er bra for respons, praktiseres det fremdeles der elementene krever faste størrelser på skjermen. Dessuten har den nye brukeren en tendens til å bruke PX Som dimensjoneringsenhet, da den er lett å håndtere og ikke er avhengig av noen annen størrelse eller element eller element.

Relative enheter

De to andre Em og prosentdel tilhører den relative kategorien av elementer da de begge endrer atferden for å håndtere responsivitet.

Em: Denne enheten refererer til skriftstørrelsen på foreldre/rotelementet. Det kan også brukes til bredde/høydejustering, men verdien av 1EM vil være 16px.

prosentdel(%): Den prosentvise enheten viser relevansen med overordnede element.

For eksempel, hvis et foreldreelement definerer bredde = "10px“. Nå vil denne verdien bli tatt som en henvisning til å knytte bredden i prosentdel.

Merk: CSS tilbyr forskjellige andre relative enheter som inkluderer REM, VW (visningsportens bredde) og VWH (Vis Port's Height) tilhører også den relative kategorien.

Eksempel: Bruke PX, EM og prosentverdier

Følgende HTML -kode praktiseres å komme til forskjellen mellom PX, EM og prosentvis verdier.

Html

bredde i %

Fontstørrelse i dem

I koden ovenfor er det to-foreldre-elementer (DIV-tagger), og hver av foreldrene har ett barn. Den første overordnede Div inneholder et avsnitt som vil utøve bredden i prosent, og den andre overordnede Div vurderer fontstørrelsen på elementet.

CSS

Ovennevnte CSS ville være den viktigste interessenten for å demonstrere forskjellen mellom PX, EM og prosentandel. Bredden på DIV -kodene er satt til 250px, noe som betyr at den vil være lik 100%. For eksempel i ovennevnte kode .per klasse tar 75% av den totale bredden (250px).

Tilsvarende er skriftstørrelsen på de andre Div -elementene satt til 12px, noe som betyr at 1EM vil være lik 12px. Hvis verdien av EM endres, vil det endres i forhold til 12px (fra foreldrelementet).

Produksjon

Fra utgangen observeres det at bredden på barnelementet (avsnitt) er blitt justert til 75% av overordnet element (DIV). Dessuten er skriftstørrelsen satt til 2EM, noe som betyr at den vil være dobbelt sammenlignet med skriftstørrelsen på overordnet element (12px = 1EM).

Konklusjon

De PX tilhører den absolutte kategorien av lengdeenheter, mens EM og %(prosentandel) refererer til den relative klassen av dimensjoneringsenheter. Verdien av PX er fikset over HTML -dokumentet, men Em og %(prosentdel) avhenger av enheten som brukes av overordnet element. EM manipulerer i hovedsak skriftstørrelsen på HTML -elementene, og (%) prosentvis enhet refererer først og fremst til å endre høyden/bredden på et HTML -element (i henhold til overordnede element). I denne artikkelen ville du ha lært det grunnleggende om forskjellige enheter som PX, EM og prosentandel. For bedre forståelse har vi vist et eksempel som bedre klargjør forskjellen mellom alle disse enhetene.