CSS3 je dodao nove relativne jedinice kao što su vh, vw, vmin, vmax. Ove jedinice se izračunavaju u odnosu na veličinu prozora pretraživača. Za desktop računare, širina prozora pretraživača je veća od širine okvira za prikaz (dodavanje širine trake za pomeranje), tako da ako postavite širinu elementa na 100vw, on će izaći izvan html-a.
Rice. 1. Pozadinska slika preko cijelog ekrana sa širinom od 100vw Podrška za pretraživač
IE: 9.0 osim vmaxa, koristite vm umjesto vmin
rub: 12.0 osim vmax, koristite vm umjesto vmin
Firefox: 19.0
Chrome: 26.0
opera: 15.0
safari: 6.1
iOS Safari: 8.0
android: 4.4
Chrome za Android: 55.0
1. vh i vw jedinice
Tehnike responzivnog web dizajna temelje se na korištenju postotaka. Ali procenti su daleko od najboljeg rješenja za svaki slučaj, jer se računaju u odnosu na dimenzije najbližeg roditeljskog elementa. Dakle, ako želite da koristite visinu i širinu prozora pretraživača, bolje je koristiti vh i vw jedinice. Na primjer, ako je visina prozora pretraživača 900px, tada će 1vh biti jednako 9px. Slično, ako je širina prozora pretraživača 1600px, tada će 1vw biti jednako 16px.
1.1. Responzivna pozadinska slika preko cijelog ekrana
Budući da je širina elementa specificiranog sa 100vw veća od širine okvira za prikaz, bolje je koristiti širinu od 100% za kreiranje pozadinskih slika preko cijelog ekrana, što će biti jednako širini korijenskog html elementa.
Cijeli ekran-bg ( pozadina: url(image.jpg); pozicija pozadine: centar; veličina pozadine: naslovnica; širina: 100%; visina: 100vh; ) 
Rice. 2. Responzivna pozadinska slika preko cijelog ekrana
1.2. efekat slajda cele stranice
Da bi blok ispunio cijelu visinu prozora pretraživača, potrebno je postaviti visinu: 100%; za tri elementa - html, tijelo i direktno za sam blok:
Html, tijelo (visina: 100%; ) odjeljak (visina: 100%; )
Budući da se procentualne veličine izračunavaju u odnosu na vrijednosti roditeljskih elemenata, potrebno je postaviti odgovarajuće vrijednosti za svaki DOM element. Jedinica vh ne mora biti ulančana, jer se njena vrijednost izračunava direktno u odnosu na prozor pretraživača:
Sekcija (visina: 100vh; )
Efekat pomicanja kroz slajdove kada se klikne na strelicu implementiran je pomoću male jQuery skripte:
jQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window ).scrollTop() + $(window).height(); ) if ($(this).hasClass("top")) (var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, tijelo").animate(( scrollTop: movePos), 600); )); ));
Visina data sa vh se također može koristiti za poravnavanje elementa sa središtem stranice.
Jedan članak nije potreban.
1px (piksel)= 1/96 inča, ali ne u CSS-u. 1 px u CSS-u je tačka na ekranu korisnika, čija fizička veličina zavisi od rezolucije uređaja i od udaljenosti sa koje osoba gleda u njegovu površinu (mobilni telefon ili TV). U kojim mjernim jedinicama ne bismo napisali kod, on se svodi na px.
1 em= na roditeljsku vrijednost veličine fonta. Imajte na umu da u poligonu ispod žuti i smeđi blokovi imaju različite veličine fonta, ali je veličina fonta ista.
16px * 1 = 16px // žuto 16px * 0,5 = 8px // zeleno 8px * 2 = 16px // smeđe
1 rem= vrijednost veličine fonta (osnovni element dokumenta).
16px * 1 = 16px // žuto 16px * 0,5 = 8px // zeleno 16px * 2 = 32px // smeđe
1 posto (1%)— vrijednost u odnosu na vrijednost svojstva roditeljske oznake.
16px * 100% = 16px // žuto 16px * 50% = 8px // zeleno 8px * 200% = 16px // smeđe
Smanjenje širine nadređenog elementa također smanjuje širinu elementa, ali ne i njegov font.
1vw= 1% širine prozora. Smanjenje širine prozora smanjuje širinu, visinu i font elementa. Font se neće skalirati kada pritisnete Ctrl + ili Ctrl - .
1vh= 1% visine prozora. Smanjenje visine prozora smanjuje širinu, visinu, font elementa. Font se neće skalirati kada pritisnete Ctrl + ili Ctrl - .
1vmin= 1vw ili 1vh. Odabire se onaj manji.
1vmax= 1vw ili 1vh. Bira se onaj koji je veći.
veličina fonta: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;
veličina fonta: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;
veličina fonta: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;
calc() funkcija
Jeste li ikada htjeli oduzeti piksele ili ems od postotaka? Na primjer, kako bi se . Sada je to moguće. Funkcija calc() vam omogućava da implementirate matematičke izraze
Zbrajanje (znak odvojen razmacima sa obe strane) - oduzimanje (znak odvojen razmacima sa obe strane) * množenje / deljenje
Evo još jednog dobrog primjera, .
- 1
- 2
- 3
- 4
Spomenuo sam nove (relativno) jedinice mjere. Ove jedinice su vw, vh, vmin i vmax i zasnovane su na veličini okvira za pregled pretraživača. Njihova stvarna veličina se mijenja kako se mijenja okvir prikaza pretraživača, što ove jedinice čini idealnim za responzivni dizajn. Iako sam se protivio upotrebi ovih jedinica za veličinu fonta u svom prethodnom postu, one mogu biti vrlo korisne kada radite sa elementima izgleda.
jedinice prikaza
Jedinice vidnog polja su relativne jedinice, što znači da se ne mogu objektivno mjeriti. Njihova veličina je određena veličinom okvira za prikaz u pretraživaču. Postoje četiri jedinice koje se odnose na okvir za prikaz.
Fokusiraću se na prva dva jer se najčešće koriste. U mnogim slučajevima, jedinice prozora (vh i vw) se preklapaju sa procentima u smislu mogućnosti. Međutim, svaki od njih ima svoje vrline i mane.
Da rezimiramo, evo šta se dešava:
Kada se radi o širini, % je bolji, a kada se radi o visini, vh je bolji.
Elementi pune širine: % > vw
Kao što sam rekao, vw određuje veličinu elementa na osnovu širine okvira za prikaz. Međutim, pretraživači izračunavaju veličinu na osnovu prostora za traku za pomeranje.
Ako širina stranice premašuje širinu okvira za prikaz, pojavljuje se traka za pomicanje. Međutim, okvir za prikaz je zapravo širi od html elementa.
Viewport > html > body
Dakle, ako postavite širinu elementa na 100vw, onda će element ići dalje od html-a i tijela. u ovom primjeru sam napravio crvenu ivicu oko html elementa i popunio dijelove različitim bojama.
Zbog ove nijanse, bolje je napraviti elemente u punoj širini stranice koristeći postotke, a ne oslanjajući se na širinu okvira za prikaz.
Elementi visine cijele stranice: vh > %
Kada kreirate elemente čija visina treba da bude jednaka visini stranice, mnogo je bolje koristiti vh umesto procenta. Budući da je procentualna veličina elementa relativna u odnosu na njegovog roditelja, možemo odrediti da element bude visina ekrana samo ako njegov roditelj također zauzima cijelu visinu ekrana. To znači da moramo pozicionirati element kao fiksni kako bismo html element učinili roditeljem, ili pribjegavati korištenju neke vrste hakovanja.
Korištenje vh za postizanje ovog efekta je prilično jednostavno:
Primjer (visina: 100vh; )
Bez obzira na to kako je element .example ugniježđen, njegove dimenzije se mogu postaviti u odnosu na dimenzije okvira za prikaz. Problem pomicanja nas neće smetati jer većina web lokacija nema horizontalnu traku za pomicanje.
Evo nekoliko primjera kako se vh jedinice mogu koristiti.
Pozadinske slike preko celog ekrana
Tipična upotreba vh jedinice je stvaranje pozadinske slike koja se proteže po cijeloj visini i širini ekrana, bez obzira na veličinu uređaja. Za to je dovoljno lako.
Bg ( pozicija: relativna; pozadina: url("bg.jpg") centar/korica; širina: 100%; visina: 100vh; )
Slično, možemo napraviti efekat "stranica" tako što ćemo svakom dijelu dati veličinu okvira za prikaz.
Presjek ( širina: 100%; visina: 100vh; )
Možemo koristiti JavaScript da stvorimo iluziju okretanja stranica.
$("nav").on("click", function() ( if ($(this).hasClass("down")) (var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("gore")) (var movePos = $(window).scrollTop() - $(window).height(); ) $("html, tijelo"). animate(( scrollTop: movePos ), 1000; ))
Preklopna slika
Vh se također može koristiti za kontrolu veličine slike unutar stranice. Na primjer, unutar članka. Želimo biti sigurni da će svaka slika biti prikazana u cijelosti bez obzira na veličinu ekrana.
Potreban nam je sljedeći kod
Img ( širina: auto; /* Automatska širina da bi visina bila proporcionalna */ maksimalna širina: 100%; /* Ne više od širine roditeljskog elementa */ maksimalna visina: 90vh; /* Ne više od visine prozora */ margina : 2rem auto;)
Podrška za pretraživač
Budući da su ove mjerne jedinice relativno nove, još uvijek postoje problemi s određenim pretraživačima.
Evo kako ih riješiti.
Od autora: nekoliko godina je prošlo od prvog prikazivanja jedinica za prikaz u CSS-u. Ovo su zaista prilagodljive jedinice dužine, čija se vrijednost mijenja u zavisnosti od veličine prozora pretraživača. Ako ste čuli za njih, ali nikada niste ulazili u detalje, ovaj članak je za vas.
Mjerne jedinice i njihovo značenje
Postoje 4 tipa jedinica prikaza u CSS-u: vh, vw, vmin i vmax.
Visina prozora za prikaz (vh) - Na osnovu visine okvira za prikaz. Vrijednost 1vh jednaka je 1% visine prozora za prikaz.
Širina prozora za prikaz (vw) - Zasnovano na širini okvira za prikaz. Vrijednost 1vw je 1% širine okvira za prikaz.
Minimum okvira prikaza (vmin) - zasnovan na minimalnoj strani okvira za prikaz. Ako je visina prozora za prikaz manja od njegove širine, 1vmin će biti jednako 1% visine. Slično, ako je širina manja od visine, tada će 1vmin biti jednako 1% širine prozora za prikaz.
Maksimum okvira za prikaz (vmax) - zasnovan na velikoj strani okvira za prikaz. Ako je visina prozora za prikaz veća od širine, tada će vrijednost 1vmax biti jednaka 1% visine okvira za prikaz. Ako je širina prozora za prikaz veća od njegove visine, tada će 1vmax biti jednak 1% širine.
Pogledajmo koje vrijednosti dobijamo u različitim situacijama:
Ako je okvir za prikaz širok 1200px i visok 1000px, tada će 10vw biti 120px, a 10vh će biti 100px. Širina prozora za prikaz je veća od njegove visine, tako da će 10vmax biti 120px, a 10vmin će biti 100px.
Ako rotiramo uređaj tako da širina bude 1000px, a visina 1200px, tada će 10vh biti 120px, a 10vw će biti 100px. Zanimljivo je da će 10vmax i dalje biti 120px, jer je sada vrijednost određena visinom okvira za prikaz. Vrijednost 10vmin će također ostati 100px.
Ako smanjimo prozor pretraživača na 1000px širine i 800px visine, tada će 10vh biti 80px, a 10vw će biti 100px. Slično, 10vmax će postati 100px, a 10vmin će postati 80px.
U ovom trenutku, jedinice prikaza za vas se možda ne razlikuju mnogo od postotaka, ali razlika je velika. U slučaju postotaka, širina i visina podređenih elemenata zavise od roditeljskog bloka. primjer:
U demonstraciji možete vidjeti kako širina prvog podređenog elementa zauzima 80% širine nadređenog. Drugi podređeni element ima širinu od 80vw, što ga čini širim od nadređenog.
Primjena jedinica prikaza
Ove jedinice su zasnovane na dimenzijama okvira za prikaz, tako da su vrlo korisne u situacijama kada se širina, visina ili dimenzije elemenata moraju mijenjati ovisno o dimenzijama okvira za prikaz.
Pozadinske slike i sekcije preko cijelog ekrana
Na webu je prilično uobičajeno vidjeti pozadinske slike na elementima koji zauzimaju cijeli ekran. Isto možete učiniti u dizajnu web stranice tako da poseban odjeljak o proizvodu ili usluzi zauzima cijeli ekran. U takvim slučajevima možete postaviti širinu elemenata na 100%, a visinu na 100vh.
Pogledajmo sljedeći HTML primjer:
a
< div class = "fullscreen a" > < p >a< p > < / div > |
CSS ispod će protegnuti dio pozadinske slike do njegove pune širine:
Cijeli ekran ( širina: 100%; visina: 100vh; padding: 40vh; ) .a (pozadina: url("path/to/image.jpg") centar/korica; )
cijeli ekran ( širina: 100% visina : 100vh ; padding : 40vh ; pozadina: url ("path/to/image.jpg") centar / naslovnica; |
Savršeni naslovi
Možda ste čuli ili čak koristili jQuery dodatak Fit Text. Zaglavlja se mogu skalirati tako da odgovaraju cijeloj širini roditeljskog elementa pomoću ovog dodatka. Kao što sam već rekao, vrijednost jedinica prozora direktno ovisi o veličini okvira za prikaz. Odnosno, ako odredite veličinu fonta naslova u jedinicama okvira za prikaz, onda će oni idealno stati ispod svakog ekrana. Ako se širina okvira za prikaz promijeni, pretraživač će automatski promijeniti naslov. Samo trebamo definirati ispravnu početnu vrijednost za veličinu fonta.
Glavni problem sa veličinom fonta i jedinicama za prikaz je taj što će veličina teksta uvelike varirati ovisno o prozoru za prikaz. Na primjer, veličina fonta od 8vw učinila bi naslov 96px za 1200px široki okvir za prikaz, 33px za širinu od 400px i 154px za širinu 1920px. Font može biti prevelik ili premalen za lakše čitanje. Možete pročitati više o pravilnoj veličini teksta s jedinicama i calc() funkciji u odličnom članku o tipografija na jedinicama prozora za prikaz.
Lako centriranje elemenata
Jedinice vidnog polja mogu biti od velike pomoći kada je u pitanju postavljanje elementa tačno u centar korisničkog ekrana. Ako je visina elementa poznata, sve što trebate učiniti je postaviti gornju i donju vrijednost svojstva margine na [(100 - visina)/2]vh.
Centrirano ( širina : 60vw ; visina : 70vh ; margina : 15vh auto ; |
Stvari koje treba zapamtiti
Ako odlučite da koristite jedinični okvir za prikaz u svojim projektima, postoji nekoliko stvari koje trebate imati na umu.
CSS3 ima nove mjerne jedinice. (Mislim da sam već pričao o ovome. eng) Već ste čuli za px, pt, em i novi rem. Pogledajmo još nekoliko: vw i vh.
Često u izgledu postoje elementi za koje se garantuje da će se uklopiti u okvir za pregled pretraživača. Generalno, JavaScript se koristi za ovo. Provjerite veličinu okvira za prikaz i u skladu s tim promijenite veličinu elemenata. Ako korisnik promijeni veličinu prozora pretraživača, postupak se ponavlja.
Pomoću vw/vh možemo postaviti veličinu elemenata u odnosu na veličinu okvira za prikaz. Jedinice vw/vh su zanimljive jer je 1vw jedinica jednaka 1/100" širine okvira za prikaz. Da biste elementu dali širinu jednaku širini okvira za prikaz, na primjer, postavili biste width:100vw.
Kako se može koristiti
Lajtboxi su sjajni kandidati za vw i vh jer su obično pozicionirani u odnosu na okvir za prikaz, međutim smatram da je položaj: fiksiran na vrhu, dnu, lijevo i desno da je lakši za korištenje jer ne morate postavljati visinu i širinu uopšte.Možete koristiti nove jedinice za veličinu elemenata koji su u normalnom toku. Na primjer, mogu postaviti snimke ekrana na stranicu. Visina ovih snimaka ekrana ne bi trebalo da prelazi visinu prozora za prikaz. Da bih to učinio, mogu postaviti maksimalnu visinu slika:
Img (maksimalna visina:95vh; )
U ovom slučaju, postavljam visinu na 95vh da ostavim malo prostora kada su na ekranu.
