CSS jedinice prikaza: brzi početak. Jedinice vh, vw, vmin, vmax

Nove relativne jedinice dodane su u CSS3 kao što su vh, vw, vmin, vmax. Ove se jedinice izračunavaju u odnosu na veličinu prozora preglednika. Za desktop računalaŠirina prozora preglednika veća je od širine prozora (dodaje se širina trake za pomicanje), tako da ako postavite širinu elementa na 100vw, on će ići dalje od html-a.

Podrška za preglednik

IE: 9.0 osim vmax, koristite vm umjesto vmin
Rub: 12.0 osim vmax, koristite vm umjesto vmin
Firefox: 19.0
Krom: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Krom za Android: 55.0

1. Jedinice vh i vw

Tehnike responzivni web dizajn temelje se na korištenju postotnih vrijednosti. Ali interes je daleko od toga Najbolja odluka za svaki slučaj, budući da se izračunavaju u odnosu na dimenzije najbližeg nadređenog elementa. Stoga, ako želite koristiti visinu i širinu prozora preglednika, bolje je koristiti jedinice vh i vw. Na primjer, ako je visina prozora preglednika 900px, tada će 1vh biti 9px. Isto tako, ako je širina prozora preglednika 1600px, tada će 1vw biti 16px.

1.1. Responzivna pozadinska slika na cijelom zaslonu

Budući da je širina elementa navedena s 100vw veća od širine okvira za prikaz, za stvaranje pozadinskih slika na cijelom zaslonu bolje je koristiti širinu od 100%, što će biti jednako širini korijenskog html elementa.

Cijeli zaslon-bg ( pozadina: url(image.jpg); položaj pozadine: centar; veličina pozadine: naslovnica; širina: 100%; visina: 100vh; ) Riža. 2. Responzivna pozadinska slika na cijelom zaslonu

1.2. Efekt slajda cijele stranice

Da biste napravili blok cijelom visinom prozora preglednika, trebate postaviti visinu: 100%; za tri elementa - html, tijelo i izravno za sam blok:

Html, tijelo ( visina: 100%; ) odjeljak ( visina: 100%; )

Budući da se veličine postotaka izračunavaju u odnosu na vrijednosti nadređenih elemenata, trebate postaviti odgovarajuće vrijednosti za svaki DOM element. Mjerna jedinica vh ne zahtijeva ulančavanje vrijednosti jer se njezina vrijednost izračunava izravno u odnosu na prozor preglednika:

Presjek (visina: 100vh;)

Učinak pomicanja kroz slajdove kada kliknete 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 navedena s vh također se može koristiti za centriranje elementa na stranici.

Jedan članak nije potreban.

1px (piksel)= 1/96 inča, ali ne u CSS-u. 1 px u CSS-u je točka na zaslonu korisnika čija fizička veličina ovisi o razlučivosti uređaja i o udaljenosti s koje osoba gleda u njegovu površinu ( mobitel ili TV). U kojoj god mjernoj jedinici pišemo kod, on se svodi na px.

1em= nadređena vrijednost veličine fonta. Imajte na umu da je u poligonu ispod veličina fonta žutih i smeđih blokova različita, 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 (korijenski 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 nadređene oznake.

16px * 100% = 16px // žuto 16px * 50% = 8px // zeleno 8px * 200% = 16px // smeđe

Kada se smanji širina roditelja, smanjuje se i širina elementa, ali ne i njegov font.

1vw= 1% širine prozora. Kada se širina prozora smanjuje, širina, visina i font elementa se smanjuju. Font se neće mijenjati kada pritisnete Ctrl + ili Ctrl -.

1vh= 1% visine prozora. Kada se visina prozora smanji, širina, visina i font elementa se smanjuju. Font se neće mijenjati kada pritisnete Ctrl + ili Ctrl -.

1vmin= 1vw ili 1vh. Odabire se onaj koji je manji.

1vmax= 1vw ili 1vh. Odabire 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 ;

funkcija calc().

Jeste li ikada htjeli oduzeti piksele ili em-ove od postotaka? Na primjer, kako bi. Sada je moguće. Funkcija calc() omogućuje implementaciju matematičkih izraza

Zbrajanje (znak odvojen razmacima s obje strane) - oduzimanje (znak odvojen razmakom s obje strane) * množenje / dijeljenje

Evo još jednog sjajnog primjera.

• 1
• 2
• 3
• 4

Spomenuo sam nove (relativne) mjerne jedinice. Ove jedinice su vw, vh, vmin i vmax, a temelje se na veličini prozora preglednika. Njihova se stvarna veličina mijenja kako se mijenja prozor preglednika, što ove jedinice čini idealnim za adaptivni dizajn. Iako sam se u svom prethodnom postu protivio korištenju ovih jedinica za određivanje veličine fonta, one mogu biti vrlo korisne za rad s elementima izgleda.

Viewport jedinice

Jedinice mjerenja okvira prikaza su relativne jedinice, to znači da se ne mogu objektivno mjeriti. Njihova veličina određena je veličinom prozora preglednika. Postoje četiri cjeline povezane s prozorom.

Usredotočit ću se na prva dva jer se najčešće koriste. U puno slučajeva jedinice prikaza(vh i vw) sijeku postotke u smislu sposobnosti. Međutim, svaki od njih ima svoje snage i slabosti.

Ukratko, to izgleda ovako:

Kada se radi o širini, bolji je %, a kada se radi o visini, bolji je vh.

Elementi pune širine stranice: % > vw

Kao što sam već rekao, vw određuje veličinu elementa na temelju širine prozora. Međutim, preglednici izračunavaju veličinu na temelju prostora za traku za pomicanje.

Ako širina stranice premašuje širinu okvira za prikaz, pojavljuje se traka za pomicanje. Međutim, u stvarnosti je širina okvira za prikaz veća od širine html elementa

Viewport > html > body

Dakle, ako postavite širinu elementa na 100vw, element će se proširiti izvan html-a i tijela. V u ovom primjeru Napravio sam crvenu granicu oko html elementa i ispunio odjeljke različitim bojama.

Zbog ove nijanse, bolje je izraditi elemente preko cijele širine stranice koristeći postotke, umjesto da se oslanjate na širinu okvira za prikaz.

Elementi visine cijele stranice: vh > %

Kada stvarate elemente koji moraju biti iste visine kao stranica, puno je bolje koristiti vh umjesto postotaka. Budući da je veličina elementa, definirana kao postotak, relativna u odnosu na njegov nadređeni element, možemo dobiti element čija je visina jednaka visini ekrana samo ako njegov nadređeni element također zauzima cijelu visinu ekrana. To znači da moramo postaviti element kao fiksan da bismo mogli html element roditelj, ili pribjeći korištenju neke vrste hacka.

Korištenje vh za postizanje ovog učinka prilično je jednostavno:

Primjer ( visina: 100vh; )

Bez obzira na to kako je element .example ugniježđen, njegove dimenzije mogu se postaviti u odnosu na dimenzije prozora. Problem pomicanja neće nam smetati budući da većina stranica nema horizontalnu traku za pomicanje

Evo nekoliko primjera kako se jedinice vh mogu koristiti.

Pozadinske slike preko cijelog zaslona

Tipična uporaba vh jedinice je stvaranje pozadinske slike koja se proteže cijelom visinom i širinom zaslona, ​​bez obzira na veličinu uređaja. Ovo je vrlo lako učiniti.

Bg ( položaj: relativan; pozadina: url("bg.jpg") centar/naslov; širina: 100%; visina: 100vh; )

Na sličan način možemo stvoriti efekt "stranica" dajući svakom odjeljku dimenzije okvira za prikaz.

Odjeljak ( š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("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animiraj((scrollTop: movePos), 1000); ))

Preklopna slika

Vh se također može koristiti za kontrolu veličine slike unutar stranice. Na primjer, u okviru članka. Želimo biti sigurni da će svaka slika biti prikazana u cijelosti bez obzira na veličinu zaslona.

Trebat će nam sljedeći kod

Img ( width: auto; /* Automatska širina treba biti proporcionalna visini */ max-width: 100%; /* Ne više od širine nadređenog elementa */ max-height: 90vh; /* Ne više od visine okvira za prikaz */ margina: 2rem auto; )

Podrška za preglednik

Budući da su ove jedinice relativno nove, još uvijek postoje problemi s određenim preglednicima.

Evo kako ih riješiti.

Od autora: Prošlo je nekoliko godina od prve pojave viewport jedinica u CSS-u. Ovo su uistinu prilagodljive jedinice duljine; njihova se vrijednost mijenja kako bi odgovarala veličini prozora preglednika. Ako ste čuli za njih, ali nikada niste istraživali detalje, ovaj je članak za vas.

Mjerne jedinice i njihovo značenje

U CSS-u postoje 4 vrste jedinica prikaza: vh, vw, vmin i vmax.

Visina okvira za prikaz (vh) – na temelju visine okvira za prikaz. Vrijednost 1vh jednaka je 1% visine okvira za prikaz.

Širina prozora (vw) – na temelju širine prozora. Vrijednost 1vw jednaka je 1% širine okvira za prikaz.

Minimum okvira za prikaz (vmin) – na temelju minimalne strane okvira za prikaz. Ako je visina prozora manja od širine, vrijednost 1vmin bit će jednaka 1% visine. Isto tako, ako je širina manja od visine, tada će 1vmin biti jednak 1% širine okvira za prikaz.

Maksimalno polje za prikaz (vmax) – na temelju velike strane okvira za prikaz. Ako je visina okvira za prikaz veća od širine, tada će vrijednost 1vmax biti jednaka 1% visine okvira za prikaz. Ako je širina okvira za prikaz veća od visine, tada će 1vmax biti jednak 1% širine.

Pogledajmo koje vrijednosti dobivamo različite situacije:

Ako je okvir za prikaz širok 1200px i visok 1000px, tada će vrijednost 10vw biti 120px, a 10vh 100px. Širina okvira za prikaz je veća od visine, tako da će 10vmax biti jednako 120px, a 10vmin će biti 100px.

Ako rotirate uređaj tako da širina postane 1000px, a visina 1200px, tada 10vh postaje 120px, a 10vw postaje 100px. Zanimljivo, 10vmax će ostati 120px, jer je sada vrijednost određena visinom prozora. Vrijednost 10vmin također će ostati 100px.

Ako smanjite prozor preglednika na 1000px u širinu i 800px u visinu, tada bi 10vh bilo 80px, a 10vw bi bilo 100px. Isto tako, 10vmax će postati 100px, a 10vmin će postati 80px.

Na ovaj trenutak jedinice prikaza možda se ne razlikuju mnogo od postotaka za vas, ali razlika je velika. U slučaju postotaka, širina i visina podređenih elemenata ovisi o nadređenom bloku. Primjer:

U demo snimci možete vidjeti kako širina prve element djeteta zauzima 80% širine matice. Drugo dijete ima širinu od 80vw, što ga čini širim od roditelja.

Primjena jedinica prikaza

Ove se jedinice temelje na dimenzijama okvira za prikaz, tako da su vrlo korisne u situacijama kada se širina, visina ili dimenzije elemenata trebaju mijenjati ovisno o dimenzijama okvira za prikaz.

Pozadinske slike i odjeljci preko cijelog zaslona

Na internetu često možete pronaći pozadinske slike na elementima koji zauzimaju cijeli zaslon. Isto se može učiniti i kod dizajna web stranica 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: