CSS3 ka shtuar njësi të reja relative si vh, vw, vmin, vmax. Këto njësi llogariten në lidhje me madhësinë e dritares së shfletuesit. Për desktopët, gjerësia e dritares së shfletuesit është më e madhe se gjerësia e portit të shikimit (duke shtuar gjerësinë e shiritit të lëvizjes), kështu që nëse vendosni gjerësinë e një elementi në 100vw, ai do të shkojë jashtë html.
Oriz. 1. Imazhi i sfondit me ekran të plotë me gjerësi 100vw Mbështetja e shfletuesit
IE: 9.0 përveç vmax, përdorni vm në vend të vmin
buzë: 12.0 përveç vmax, përdorni vm në vend të vmin
Firefox: 19.0
Krom: 26.0
opera: 15.0
safari: 6.1
iOS Safari: 8.0
android: 4.4
Chrome për Android: 55.0
1. njësitë vh dhe vw
Teknikat responsive të dizajnit të uebit bazohen në përdorimin e përqindjeve. Por përqindjet janë larg nga zgjidhja më e mirë për çdo rast, pasi ato llogariten në raport me dimensionet e elementit mëmë më të afërt. Pra, nëse doni të përdorni lartësinë dhe gjerësinë e dritares së shfletuesit, është më mirë të përdorni njësitë vh dhe vw. Për shembull, nëse lartësia e dritares së shfletuesit është 900 px, atëherë 1vh do të jetë e barabartë me 9 px. Në mënyrë të ngjashme, nëse gjerësia e dritares së shfletuesit është 1600px, atëherë 1vw do të jetë e barabartë me 16px.
1.1. Imazhi i përgjegjshëm i sfondit me ekran të plotë
Meqenëse gjerësia e elementit të specifikuar me 100vw është më e madhe se gjerësia e portit të shikimit, është më mirë të përdorni një gjerësi prej 100% për të krijuar imazhe të sfondit të ekranit të plotë, të cilat do të jenë të barabarta me gjerësinë e elementit rrënjë html.
Ekrani i plotë-bg ( sfondi: url (image.jpg); pozicioni i sfondit: në qendër; madhësia e sfondit: kopertina; gjerësia: 100%; lartësia: 100 vh; ) 
Oriz. 2. Imazhi i përgjegjshëm i sfondit me ekran të plotë
1.2. efekti i rrëshqitjes së faqes së plotë
Për ta bërë bllokun të mbushë të gjithë lartësinë e dritares së shfletuesit, duhet të vendosni lartësinë: 100%; për tre elementë - html, trup dhe drejtpërdrejt për vetë bllokun:
Html, trupi (lartësia: 100%; ) seksioni (lartësia: 100%; )
Meqenëse madhësitë e përqindjes llogariten në lidhje me vlerat e elementeve mëmë, është e nevojshme të vendosni vlerat e duhura për secilin element DOM. Njësia vh nuk ka nevojë të lidhet me zinxhir, pasi vlera e saj llogaritet drejtpërdrejt në lidhje me dritaren e shfletuesit:
Seksioni (lartësia: 100vh; )
Efekti i lëvizjes nëpër rrëshqitje kur klikoni mbi shigjetën zbatohet duke përdorur një skript të vogël jQuery:
jQuery(document).ready(funksion($) ( $("nav").on("kliko", funksion() ( if ($(this).hasClass("poshte")) ( var movePos = $(dritare ).scrollTop() + $(dritare).lartësia(); ) if ($(this).hasClass("lart")) ( var movePos = $(dritare).scrollTop() - $(dritare).lartësia( );) $("html, trupi").animate(( scrollTop: movePos), 600); )); ));
Lartësia e dhënë me vh mund të përdoret gjithashtu për të lidhur një element në qendër të faqes.
Një artikull nuk është i nevojshëm.
1 px (piksel)= 1/96 inç, por jo në CSS. 1 px në CSS është një pikë në ekranin e përdoruesit, madhësia fizike e së cilës varet nga rezolucioni i pajisjes dhe nga distanca nga e cila një person shikon sipërfaqen e saj (telefon celular ose TV). Në çdo njësi matëse që nuk do të shkruanim kodin, ai reduktohet në px.
1 em= në vlerën e madhësisë së shkronjave të prindit. Vini re se në poligonin poshtë blloqeve të verdhë dhe kafe kanë madhësi të ndryshme të shkronjave, por madhësia e shkronjave është e njëjtë.
16 px * 1 = 16 px // e verdhë 16 px * 0,5 = 8 px // jeshile 8 px * 2 = 16 px // kafe
1 rem= vlera e madhësisë së shkronjave (elementi rrënjësor i dokumentit).
16 px * 1 = 16 px // e verdhë 16 px * 0,5 = 8 px // jeshile 16 px * 2 = 32 px // kafe
1 përqind (1%)— vlera në lidhje me vlerën e pronës së etiketës mëmë.
16 px * 100% = 16 px // e verdha 16 px * 50% = 8 px // jeshile 8 px * 200% = 16 px // kafe
Zvogëlimi i gjerësisë së prindit gjithashtu zvogëlon gjerësinë e elementit, por jo fontin e tij.
1vw= 1% e gjerësisë së dritares. Zvogëlimi i gjerësisë së dritares zvogëlon gjerësinë, lartësinë dhe fontin e elementit. Fonte nuk do të shkallëzohet kur shtypni Ctrl + ose Ctrl - .
1vh= 1% e lartësisë së dritares. Zvogëlimi i lartësisë së dritares zvogëlon gjerësinë, lartësinë, fontin e elementit. Fonte nuk do të shkallëzohet kur shtypni Ctrl + ose Ctrl - .
1vmin= 1vw ose 1vh. Zgjidhet ai që është më i vogël.
1 v max= 1vw ose 1vh. Zgjidhet ai që është më i madh.
madhësia e shkronjave: 16 px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;
madhësia e shkronjave: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;
madhësia e shkronjave: 32 px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;
funksioni calc().
A keni dashur ndonjëherë të zbrisni pikselat ose ems nga përqindjet? Për shembull, në mënyrë që të . Tani është e mundur. Funksioni calc() ju lejon të zbatoni shprehje matematikore
Mbledhja (karakteri i ndarë me hapësira në të dyja anët) - zbritje (karakter i ndarë me hapësira në të dyja anët) * shumëzim / pjesëtim
Këtu është një shembull tjetër i mirë,.
- 1
- 2
- 3
- 4
Përmenda njësitë e reja (relativisht) matëse. Këto njësi janë vw, vh, vmin dhe vmax dhe bazohen në madhësinë e portit të shikimit të shfletuesit. Madhësia e tyre aktuale ndryshon me ndryshimin e pamjes së shfletuesit, duke i bërë këto njësi ideale për dizajn të përgjegjshëm. Ndërsa unë kundërshtova përdorimin e këtyre njësive për madhësitë e shkronjave në postimin tim të mëparshëm, ato mund të jenë shumë të dobishme kur punoni me elementet e paraqitjes.
njësitë e pamjes
Njësitë e portit të pamjes janë njësi relative, që do të thotë se ato nuk mund të maten në mënyrë objektive. Madhësia e tyre përcaktohet nga madhësia e portit të shikimit në shfletues. Ka katër njësi që lidhen me portin e shikimit.
Do të fokusohem në dy të parat pasi ato janë më të përdorurat. Në shumë raste, njësitë e portit të pamjes (vh dhe vw) mbivendosen me përqindjet për sa i përket aftësive. Sidoqoftë, secila prej tyre ka pikat e veta të forta dhe të dobëta.
Për ta përmbledhur, kjo është ajo që ndodh:
Kur kemi të bëjmë me gjerësi, % është më mirë, dhe kur kemi të bëjmë me lartësi, vh është më mirë.
Elementet me gjerësi të plotë: % > vw
Siç thashë vw përcakton madhësinë e elementit bazuar në gjerësinë e portit të shikimit. Megjithatë, shfletuesit llogarisin madhësinë bazuar në hapësirën për shiritin e lëvizjes.
Nëse gjerësia e faqes e kalon gjerësinë e portës së pamjes, atëherë shfaqet një shirit lëvizës. Sidoqoftë, porta e shikimit është në të vërtetë më e gjerë se elementi html.
Porta e pamjes > html > trupi
Pra, nëse vendosni gjerësinë e një elementi në 100vw, atëherë elementi do të shkojë përtej html dhe trupit. në këtë shembull, bëra një kufi të kuq rreth elementit html dhe mbusha seksionet me ngjyra të ndryshme.
Për shkak të kësaj nuance, është më mirë të krijoni elementë në gjerësinë e plotë të faqes duke përdorur përqindje, dhe të mos mbështeteni në gjerësinë e portit të shikimit.
Elementet e lartësisë së faqes së plotë: vh > %
Kur krijoni elementë, lartësia e të cilëve duhet të jetë e barabartë me lartësinë e faqes, është shumë më mirë të përdorni vh në vend të përqindjeve. Për shkak se madhësia e përqindjes së një elementi është në raport me prindin e tij, ne mund të marrim një element të jetë lartësia e ekranit vetëm nëse prindi i tij zë gjithashtu të gjithë lartësinë e ekranit. Kjo do të thotë që ne duhet ta pozicionojmë elementin si të fiksuar në mënyrë që ta bëjmë elementin html prind, ose të përdorim një lloj hakimi.
Përdorimi i vh për të arritur këtë efekt është mjaft i thjeshtë:
Shembull (lartësia: 100vh; )
Pavarësisht se si është futur elementi.shembull, dimensionet e tij mund të vendosen në lidhje me dimensionet e portit të shikimit. Problemi i lëvizjes nuk do të na shqetësojë pasi shumica e sajteve nuk kanë një shirit lëvizjeje horizontale.
Këtu janë disa shembuj se si mund të përdoren njësitë vh.
Imazhet e sfondit të ekranit të plotë
Një përdorim tipik i njësisë vh është krijimi i një imazhi të sfondit që përfshin lartësinë dhe gjerësinë e plotë të ekranit, pavarësisht nga madhësia e pajisjes. Për ta bërë këtë është mjaft e lehtë.
Bg (pozicioni: relative; sfondi: url("bg.jpg") qendra/kopertina; gjerësia: 100%; lartësia: 100vh; )
Në mënyrë të ngjashme, ne mund të bëjmë efektin "pages" duke i dhënë secilit seksion madhësinë e portit të shikimit.
Seksioni (gjerësia: 100%; lartësia: 100 vh; )
Mund të përdorim JavaScript për të krijuar iluzionin e kthimit të faqeve.
$("nav").on("kliko", funksion() ( if ($(this).hasClass("poshtë")) ( var movePos = $(dritare).scrollTop() + $(dritare).lartësia (); ) nëse ($(this).hasClass("lart")) ( var movePos = $(dritare).scrollTop() - $(dritare).lartësia(); ) $("html, trupi"). animate (( scrollTop: movePos ), 1000); ))
Imazhi i palosshëm
Vh mund të përdoret gjithashtu për të kontrolluar madhësinë e një imazhi brenda një faqeje. Për shembull, brenda artikullit. Ne duam të sigurohemi që çdo imazh të shfaqet në tërësi, pavarësisht nga madhësia e ekranit.
Na duhet kodi i mëposhtëm
Img ( gjerësia: automatik; /* Gjerësia automatike për të mbajtur lartësinë proporcionale */ gjerësia maksimale: 100%; /* Jo më shumë se gjerësia e elementit prind */ lartësia maksimale: 90vh; /* Jo më shumë se lartësia e portit të pamjes */ margjina : 2 rem auto;)
Mbështetja e shfletuesit
Për shkak se këto njësi matëse janë relativisht të reja, ka ende probleme me disa shfletues.
Ja si t'i zgjidhni ato.
Nga autori: kanë kaluar disa vite që nga shfaqja e parë e njësive të portit të shikimit në CSS. Këto janë me të vërtetë njësi gjatësie adaptive, vlera e tyre ndryshon sipas madhësisë së dritares së shfletuesit. Nëse keni dëgjuar për to, por nuk keni hyrë kurrë në detaje, ky artikull është për ju.
Njësitë matëse dhe kuptimi i tyre
Ekzistojnë 4 lloje të njësive të portit të shikimit në CSS: vh, vw, vmin dhe vmax.
Lartësia e portit të shikimit (vh) - Bazuar në lartësinë e portit të pamjes. Vlera 1vh është e barabartë me 1% të lartësisë së pamjes së pamjes.
Gjerësia e portës së pamjes (vw) - Bazuar në gjerësinë e portës së pamjes. Vlera e 1vw është 1% e gjerësisë së portës së pamjes.
Minimumi i portës së shikimit (vmin) - bazuar në anën minimale të portës së shikimit. Nëse lartësia e portit të shikimit është më e vogël se gjerësia e saj, 1vmin do të jetë e barabartë me 1% të lartësisë. Në mënyrë të ngjashme, nëse gjerësia është më e vogël se lartësia, atëherë 1vmin do të jetë e barabartë me 1% të gjerësisë së portit të shikimit.
Maksimumi i portit të shikimit (vmax) - bazuar në anën e madhe të portës së shikimit. Nëse lartësia e portës së pamjes është më e madhe se gjerësia, atëherë vlera e 1vmax do të jetë e barabartë me 1% të lartësisë së portit të pamjes. Nëse gjerësia e portit të shikimit është më e madhe se lartësia e saj, atëherë 1vmax do të jetë e barabartë me 1% të gjerësisë.
Le të shohim se çfarë vlerash marrim në situata të ndryshme:
Nëse porta e shikimit është 1200 px e gjerë dhe 1000 px e lartë, atëherë 10vw do të jetë 120 px dhe 10vh do të jetë 100 px. Gjerësia e portës së shikimit është më e madhe se lartësia e saj, kështu që 10vmax do të jetë 120px dhe 10vmin do të jetë 100px.
Nëse e rrotullojmë pajisjen në mënyrë që gjerësia të jetë 1000 px dhe lartësia 1200 px, atëherë 10vh do të jetë 120 px dhe 10vw do të jetë 100 px. Interesante, 10vmax do të jetë ende 120 px, sepse tani vlera përcaktohet nga lartësia e portit të shikimit. Vlera 10vmin do të mbetet gjithashtu 100px.
Nëse e zvogëlojmë dritaren e shfletuesit në 1000px gjerësi dhe 800px lartësi, atëherë 10vh do të jetë 80px dhe 10vw do të jetë 100px. Në mënyrë të ngjashme, 10vmax do të bëhet 100px dhe 10vmin do të bëhet 80px.
Për momentin, njësitë e portit të shikimit për ju mund të mos ndryshojnë shumë nga përqindjet, por ndryshimi është i madh. Në rastin e përqindjeve, gjerësia dhe lartësia e elementeve fëmijë varen nga blloku prind. Shembull:
Në demonstrim, mund të shihni se si gjerësia e elementit të parë fëmijë merr 80% të gjerësisë nga prindi. Elementi i dytë fëmijë ka një gjerësi prej 80vw, duke e bërë atë më të gjerë se prindi.
Aplikimi i njësive të portit të shikimit
Këto njësi bazohen në dimensionet e portës së pamjes, kështu që ato janë shumë të dobishme në situatat kur gjerësia, lartësia ose dimensionet e elementeve duhet të ndryshojnë në varësi të dimensioneve të portit të pamjes.
Imazhet dhe seksionet e sfondit të ekranit të plotë
Në ueb, është mjaft e zakonshme të shikosh imazhe të sfondit në elementë që zënë të gjithë ekranin. Ju mund të bëni të njëjtën gjë në hartimin e faqes në internet në mënyrë që një seksion i veçantë për një produkt ose shërbim të zërë të gjithë ekranin. Në raste të tilla, mund të vendosni gjerësinë e elementeve në 100% dhe lartësinë në 100vh.
Le të hedhim një vështrim në shembullin e mëposhtëm HTML:
a
< div class = "fullscreen a" > < p >a< p > < / div > |
CSS më poshtë do të zgjasë seksionin e imazhit të sfondit në gjerësinë e tij të plotë:
Ekrani i plotë ( gjerësia: 100%; lartësia: 100 vh; mbushja: 40 vh; ) .a ( sfondi: url ("path/to/image.jpg") qendër/kopertina; )
ekran i plotë ( gjerësia: 100% lartësia: 100vh; mbushje : 40vh ; sfond : url (" path/to/image.jpg" ) qendër / kopertinë ; |
Titujt perfekt
Ju mund të keni dëgjuar ose madje keni përdorur shtojcën jQuery Teksti i përshtatur. Titujt mund të shkallëzohen për të përshtatur gjerësinë e plotë të elementit prind me këtë shtesë. Siç thashë më parë, vlera e njësive të pamjes varet drejtpërdrejt nga madhësia e portit të shikimit. Kjo do të thotë, nëse specifikoni madhësinë e shkronjave të titujve në njësitë e portit të pamjes, atëherë ata do të përshtaten në mënyrë ideale nën çdo ekran. Nëse ndryshon gjerësia e portit të pamjes, shfletuesi do të ndryshojë automatikisht titullin. Ne vetëm duhet të përcaktojmë vlerën e saktë fillestare për madhësinë e shkronjave.
Problemi kryesor me njësitë e madhësisë së shkronjave dhe portit të pamjes është se madhësia e tekstit do të ndryshojë shumë në varësi të portit të pamjes. Për shembull, një madhësi fonti prej 8vw do ta bënte titullin 96px për një pamje të gjerë 1200px, 33px për një pamje të gjerë 400px dhe 154px për një pamje të gjerë 1920px. Fonti mund të jetë ose shumë i madh ose shumë i vogël për lexim të lehtë. Mund të lexoni më shumë rreth madhësisë së duhur të tekstit me njësi dhe funksionit calc() në artikullin e shkëlqyer mbi tipografi në njësitë e pamjes.
Qendra e lehtë e elementit
Njësitë e portit të pamjes mund të ndihmojnë shumë kur bëhet fjalë për vendosjen e një elementi saktësisht në qendër të ekranit të përdoruesit. Nëse lartësia e elementit dihet, atëherë gjithçka që duhet të bëni është të vendosni vlerat e sipërme dhe të poshtme të veçorisë së marzhit në [(100 - lartësi)/2]vh.
në qendër ( gjerësia: 60 vw; lartësia: 70 Vh; marzhi: 15vh auto; |
Gjërat për të mbajtur mend
Nëse vendosni të përdorni portin e pamjes së njësisë në projektet tuaja, ka disa gjëra që duhet të keni parasysh.
CSS3 ka njësi të reja matëse. (Mendoj 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ë shohim 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ë. Kontrolloni madhësinë e portit të pamjes dhe ndryshoni madhësinë e elementeve në përputhje me rrethanat. Nëse përdoruesi ndryshon madhësinë e dritares së shfletuesit, procedura përsëritet.
Me vw/vh 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, do të vendosni gjerësinë:100vw.
Si mund të përdoret
Kutitë e lehta 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: të fiksuar me lart, poshtë, majtas dhe djathtas për t'u përdorur më lehtë pasi nuk keni nevojë të vendosni lartësinë dhe gjerësinë fare.Ju mund t'i përdorni njësitë e reja për të përmasuar elementë që janë në rrjedhë normale. Për shembull, unë mund të vendos pamjet e ekranit në faqe. Lartësia e këtyre pamjeve të ekranit nuk duhet të kalojë lartësinë e portit të shikimit. Për ta bë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.
