Njësitë e gjatësisë CSS. Përmasat me njësi vw dhe vh

11.08.2019 Vlerësime

Ka njësi të reja në CSS3. (Më duket se kam folur tashmë për këtë. eng) Ju keni dëgjuar tashmë për px, pt, em dhe rem të ri. Le të hedhim një vështrim në disa të tjera: vw dhe vh.

Shpesh ka elementë në paraqitjen që garantohen të përshtaten në pamjen e shfletuesit. Në përgjithësi, JavaScript përdoret për këtë. Le të kontrollojmë madhësinë e portit të shikimit dhe të ndryshojmë madhësinë e elementeve në përputhje me rrethanat. Nëse përdoruesi ndryshon madhësinë e dritares së shfletuesit, atëherë procedura përsëritet.

Me vw / vh ne mund të vendosim madhësinë e elementeve në lidhje me madhësinë e portit të shikimit. Njësitë vw/vh janë interesante sepse 1vw është një njësi e barabartë me 1/100 "të gjerësisë së portës së pamjes. Për t'i dhënë një elementi një gjerësi të barabartë me gjerësinë e portës së pamjes, për shembull, duhet të vendosni gjerësinë: 100vw.

Si mund të përdoret

Lightbox-et janë një kandidat i shkëlqyeshëm për vw dhe vh pasi ato zakonisht pozicionohen në lidhje me portin e shikimit, megjithatë unë gjej pozicionin: fiks me vlerat lart, poshtë, majtas dhe djathtas më të lehta për t'u përdorur pasi nuk keni nevojë të vendosni lartësinë. dhe gjerësia fare.

Ju mund të përdorni njësitë e reja matëse për të vendosur madhësinë e artikujve që janë në rrjedhë normale. Për shembull, unë mund të postoj pamje nga ekrani në faqe. Lartësia e këtyre pamjeve të ekranit nuk duhet të kalojë lartësinë e portit të shikimit. Për këtë, unë mund të vendos lartësinë maksimale të imazheve:

Img (lartësia maksimale: 95vh;)

Në këtë rast, po e vendos lartësinë në 95vh për të lënë pak hapësirë kur ato janë në ekran.

Mbështetja e shfletuesit

Ndërsa rem mbështetet nga pothuajse të gjithë shfletuesit kryesorë duke përfshirë IE9, atëherë përdorimi i vw dhe vh ia vlen të prisni. Aktualisht vetëm Internet Explorer 9 i mbështet ato.

Njësitë CSS luajnë një rol të rëndësishëm në hartimin e faqes në internet dhe madhësinë e elementeve të ndryshëm. Vlerat CSS mund të shprehen si numra pozitivë ose negativë, megjithëse disa veti pranojnë vetëm numra pozitivë. Vlera numerike shoqërohet me një shkurtim me dy shkronja që përfaqëson njësinë aktuale të gjatësisë. Për shembull cm (centimetra), px (pikselë) ose em CSS. Një përjashtim nga ky rregull është vlera 0 (zero), e cila nuk kërkon një njësi matëse.

Ekzistojnë dy lloje të njësive CSS: absolute dhe relative.

Njësitë absolute të gjatësisë CSS

Njësitë absolute CSS nuk janë të përshtatshme për dizajn në internet. Ato përfaqësojnë një përcaktim dixhital të rezultateve të matjes në botën fizike dhe janë të pavarura nga madhësia dhe rezolucioni i ekranit. Gjatësitë absolute me të njëjtën vlerë mund të ndryshojnë në ekrane të ndryshme. Kjo është shkaktuar nga ndryshimi në DPI të ekranit (pika për inç).

Ekranet me rezolucion të lartë kanë një DPI më të lartë se ekranet me rezolucion më të ulët, duke i bërë imazhet dhe teksti të duken më të vogla në to. Njësitë absolute përdoren në përcaktimin e stileve në printim, ku matjet bëhen në inç, pika dhe majat.

Njësitë e gjatësisë absolute:

cm (centimetra);
mm (milimetra);
në (inç);
pc (majat);
pt (pikë);
px (pikselë).

Shumica e njësive absolute të gjatësisë janë të padobishme në internet. Përjashtimi i vetëm është px. Pixelët janë njësi relative në lidhje me rezolucionet e ekranit. Për printera dhe monitorë me rezolucion shumë të lartë, një piksel në CSS është i barabartë me disa pikselë në ekran, kështu që numri i pikselëve për inç është rreth 96. Pikseli është njësia më e vogël e matjes dhe zakonisht përdoret si referencë për të tjerët.

Njësitë e gjatësisë relative në CSS

Njësitë e gjatësisë relative në CSS nuk janë fikse. Vlerat e tyre varen nga pikat ose funksionet e tjera. Ata janë më të kërkuar në dizajnin e uebit sepse e bëjnë më të lehtë përcaktimin e madhësisë së një elementi. Me ndihmën e tyre, ju mund të vendosni gjerësinë, lartësinë, madhësinë e shkronjave, etj. në lidhje me parametrat e tjerë bazë.

Njësi relative specifike për shkronjat

Njësitë relative specifike për fontin i referohen një madhësie të paracaktuar të shkronjave ose vlerës së veçorisë së familjes së shkronjave:

ex (lartësia e karakterit x);
ch ( gjerësia e karakterit zero (0));
em njësi në CSS (lartësia e shkronjave të elementit aktual);
rem ( madhësia e shkronjave të elementit rrënjë).

psh

Përcaktuar si " lartësia e karakterit x të fontit aktual OSE gjysma 1 em“. Kjo do të thotë, lartësia e shkronjës x të vogël të fontit të instaluar. Kur ndryshon vlera e vetive font-family, ndryshon njësia e ex.

ch

E barabartë me gjerësinë e karakterit 0. Kjo njësi matëse ndryshon gjithashtu kur ndryshon vlera e pronës font-family.

em

Njësia em CSS ka një vlerë të barabartë me madhësinë e shkronjave të elementit kryesor ose prind. Për shembull, nëse madhësia e shkronjave të elementit prind është 30 px, atëherë 1em do të llogaritet si 30 px (30 x 1) për të gjithë fëmijët. Numri nuk duhet të jetë i plotë. Nëse në shembull zëvendësojmë 1em me 0.5, atëherë vlera do të jetë 15px (30 x 0.5).

Njësia em vendoset në vlerën e etiketës mëmë. Kjo mund të çojë në rezultate të padëshirueshme kur përdorni elementë të mbivendosur.

Le të themi se kemi tre elementë të mbivendosur. Elementi i parë (rrënja) ka një madhësi fonti prej 30 px, dhe dy elementët e mbivendosur kanë një madhësi fonti prej 2em. Një element i vendosur në rrënjë do të ketë një madhësi fonti të llogaritur si 60 px (30 x 2). Dhe elementi i vendosur brenda tij do të ketë një madhësi fonti të llogaritur si 120 px (60 x 2).

rem

rem është i ngjashëm me em CSS, por vlera e tij mbetet gjithmonë e njëjtë me madhësinë e shkronjave të elementit rrënjë. Njësia rem është e dobishme kur dizajnoni sajte të përgjegjshme sepse ju lejon të shkallëzoni të gjithë faqen duke ndryshuar madhësinë e shkronjave në elementin HTML.

Njësi përqindje e gjatësisë bazuar në madhësinë e portit të shikimit

Porta e shikimit bazohet në gjerësinë dhe lartësinë e portës së shikimit dhe përfshin:

vh ( lartësia e pamjes);
vw ( gjerësia e portës së pamjes);
vmin ( më i vogli i (vw, vh));
vmax ( më i madhi i (vw, vh)).

vw

Kjo është gjerësia e portit të shikimit. 1vw është e barabartë me 1/100 e gjerësisë së portës së pamjes. Pak si përqindje, përveç që vlera mbetet e njëjtë për të gjithë elementët, pavarësisht nga gjerësia e elementeve të tyre mëmë. Për shembull, nëse gjerësia e dritares është 1000 px, atëherë 1vw do të jetë 10 px.

vh

Njësoj si vw ( gjerësia e portës së pamjes), vetëm kjo njësi matëse varet nga lartësia e portit të shikimit. 1vh është e barabartë me 1/100 e lartësisë së pamjes. Për shembull, nëse lartësia e dritares së shfletuesit është 900 px, atëherë 1vh do të jetë 9 px.

vmin

Vmin është 1/100 e vlerës minimale ndërmjet lartësisë dhe gjerësisë së portit të shikimit. Me fjalë të tjera, 1/100 e anës më të shkurtër. Për shembull, nëse dimensionet e dritares 1200 me 800 piksele atëherë vlera e vmin do të jetë 8 px.

vmax

vmax është 1/100 e vlerës maksimale midis lartësisë dhe gjerësisë së portit të shikimit. Me fjalë të tjera, 1/100 e anës më të gjatë. Për shembull, nëse dimensionet ishin 1200 me 800 piksele atëherë vmax është 12 px.

Interesi%

Distanca, e dhënë si përqindje, varet nga gjatësia e elementit mëmë. Për shembull, nëse elementi prind është 1000 px i gjerë dhe fëmija i tij është 50% e kësaj vlere, atëherë fëmija do të jetë 500 px i gjerë.

MBËSHTETJE E BROWSER

em CSS, ex, px, cm, mm, in, pt dhe pc

janë të mbështetur në të gjithë shfletuesit, duke përfshirë versionet më të vjetra të IE.

Një nga aspektet më konfuze CSSështë aplikacioni përmasa e germave atribut për shkallëzimin e tekstit. Duke përdorur CSS, mund të ndryshoni madhësinë e tekstit në shfletues duke përdorur katër njësi të ndryshme. Cila nga këto katër njësi është më e mira për ueb? Kjo është një pyetje që ka gjeneruar një sërë diskutimesh dhe kritikash. Gjetja e një përgjigje përfundimtare është e vështirë sepse vetë pyetja është komplekse.

Takoni njësitë

1. "Ems" (em): "em" është një njësi e shkallëzueshme që përdoret në dokumentet e internetit. "Em" është e barabartë me madhësinë aktuale të shkronjave, për shembull, nëse madhësia e shkronjave në dokument është 12pt, 1em është e barabartë me 12pt. "Em" është i shkallëzuar në natyrë, kështu që 2em do të jetë 24pt, 0.5em do të jetë 6pt, e kështu me radhë. Përdorimi i "em" po bëhet gjithnjë e më i popullarizuar në dokumentet e internetit për shkak të shkallëzueshmërisë së tij dhe aftësisë për t'u përdorur në mënyrë të dobishme në pajisjet celulare.
2. Piksele (px): "px" janë njësi me madhësi fikse që përdoren në ekrane (për shembull, për të lexuar në ekranin e kompjuterit). Një piksel është i barabartë me një pikë në ekranin e kompjuterit (njësia më e vogël e rezolucionit të ekranit tuaj). Shumë dizajnerë të internetit përdorin px në dokumentet e tyre të uebit në mënyrë që të marrin një prezantim të përsosur të faqes së tyre me pixel në një shfletues. Një nga problemet me përdorimin e px është se këto njësi nuk lejojnë zmadhimin për lexuesit me dëmtim të shikimit ose pajisjet celulare.
3. Pikat (pt): "pt", përdoret tradicionalisht në median e shkruar (çdo gjë që duhet të shtypet në letër, etj.). Një "pt" është e barabartë me 1/72 e inçit. "Pt", si "px", ka një madhësi fikse të njësisë dhe nuk mund të shkallëzohet.
4. Përqindjet (%): Njësitë% janë të ngjashme me "em" me përjashtim të disa dallimeve themelore. Së pari, madhësia aktuale e shkronjave është 100% (d.m.th. 12pt = 100%). Kur përdorni "%", teksti juaj është plotësisht i shkallëzueshëm për pajisjet celulare dhe aksesueshmërinë.

Pra, cili është ndryshimi?

Do të jetë e lehtë për të kuptuar ndryshimin midis njësive të madhësisë së shkronjave kur t'i shihni ato në veprim. Në mënyrë tipike 1em = 12pt = 16px = 100%. Me këto madhësi të shkronjave, le të shohim se çfarë ndodh kur rritni madhësinë bazë të shkronjave (duke përdorur përzgjedhësin e trupit CSS) nga 100% në 120%.

Ndrysho madhësinë e shkronjave nga 100% në 120%.

Siç mund ta shihni, "em" dhe "%" rritën madhësinë e shkronjave, ndërsa "px" dhe "pt" jo. Vendosja e një madhësie absolute për tekstin tuaj mund të jetë e thjeshtë, por është shumë më mirë që vizitorët tuaj të përdorin tekst të shkallëzuar që mund të shfaqet në çdo pajisje ose çdo makinë. Për këtë arsye, njësitë "em" dhe "%" preferohen për tekstin e një dokumenti në internet.

"Em" kundrejt "%"

Zbuluam se njësitë "px" dhe "pt" nuk janë më të mirat për dokumentet në ueb, gjë që na detyron të përdorim "em" dhe "%". Në teori, njësitë "em" dhe "%" janë identike, por në praktikë ato kanë dallime të vogla që janë të rëndësishme për t'u marrë parasysh.

Në shembullin e mësipërm, ne përdorëm përqindjet (në etiketën e trupit) si njësi bazë të madhësisë së shkronjave. Nëse e ndryshoni njësinë bazë të madhësisë së shkronjave nga "%" në "em" (d.m.th., trupi (madhësia e shkronjave: 1em;)), ju, duhet mos e vini re ndryshimin. Le të shohim se çfarë ndodh kur "1em" është njësia jonë bazë dhe kur klienti ndryshon "Madhësia e shkronjave" në cilësimet e shfletuesit të tij (kjo veçori ofrohet në shumë shfletues, për shembull, Internet Explorer).

Madhësia e shkronjave kur klienti ndryshon madhësinë e tekstit në shfletues.

Kur madhësia e tekstit vendoset në "mesatare" në shfletuesin e klientit, nuk vërehet asnjë ndryshim midis "em" dhe "%". Megjithatë, nëse parametri ndryshohet, ndryshimi bëhet shumë i madh. Me cilësimin "Më i vogli", "em" është shumë më i vogël se "%", dhe me cilësimin "Më i madh", përkundrazi, "em" shfaqet shumë më i madh se "%". Ndërsa shumë argumentojnë se njësitë në "em" janë shkallëzuar siç synohet, në praktikë teksti në "em" është shkallëzuar shumë papritur, duke e bërë tekstin më të vogël të palexueshëm në disa makina.

Verdikti

Në teori, njësitë "em" janë standardi i ri dhe i ardhshëm për madhësinë e shkronjave në internet, por në praktikë, njësitë "%" lejojnë që teksti të shfaqet në mënyrë më të qëndrueshme dhe më të përshtatshme për përdoruesit. Kur ndryshoni parametrat e klientit, teksti në "%" ndryshoi në përmasa të arsyeshme, gjë që lejon projektuesit të ruajnë lexueshmërinë, aksesueshmërinë dhe dizajnin.

Fitues: përqind (%).

Njësi të reja relative janë shtuar në CSS3 si vh, vw, vmin, vmax. Këto njësi llogariten në lidhje me madhësinë e dritares së shfletuesit. Për desktopët, dritarja e shfletuesit është më e gjerë se porta e pamjes (duke shtuar gjerësinë e shiritit të lëvizjes), kështu që nëse vendosni gjerësinë në 100vw për një element, ai do të tejkalojë html.

Oriz. 1. Imazhi i sfondit me ekran të plotë me gjerësi 100vw