U radu s CCS-om vrlo je lako zapeti u nekom trenutku, jer se ponekad i pri radu poznatom metodom dogodi da se pojave novi problemi.
Kako internet raste, tako raste i potražnja za novim rješenjima. A budući da smo vi i ja web dizajneri i front-end programeri, nemamo drugog izbora nego moći raditi s razne opcije i moći dobro raditi.
To znači da moramo biti u stanju dobro raditi čak i s onim specifičnim alatima koji se inače vrlo rijetko koriste, ali postoje situacije kada su potrebni.
Danas bismo vam željeli reći o nekima CSS alati. Svaki od ovih alata je kao mjerna jedinica, kao što su pikseli ili ems, ali najvjerojatnije niste znali za njih.
Počnimo s nečim što izgleda kao nešto što vam je vjerojatno već poznato. Jedinica em je definirana kao trenutna veličina fonta. Dakle, ako, na primjer, postavite veličinu fonta na element tijela, tada će em vrijednost bilo kojeg nižeg elementa unutar tijela biti jednaka toj veličini fonta.
Ovdje smo napisali da će veličina fonta diva biti 1.2em. Ovo je 1,2 puta veće od veličine fonta koju je naslijedio, a koja je iznosila 14 piksela. Dakle, rezultat je 16.8px.
Međutim, što se događa ako kaskadno postavite em-definirane veličine fonta jednu u drugu? U sljedećem odlomku primjenjujemo isti CCS kao gore. Svaki div nasljeđuje veličinu fonta od svog roditelja, dajući nam progresivno veće veličine fonta.
Iako to može biti prikladno u nekim slučajevima, često se želimo jednostavno osloniti na jednu metriku za mjerenje. U ovom slučaju trebamo koristiti rem. Slovo "r" in rem označava "korijen"; jednaka je veličini fonta postavljenoj u korijenskom elementu; u većini slučajeva to je HTML element.
Html (veličina fonta: 14px; ) div (veličina fonta: 1,2 rem; )
U sva tri diva iz prethodnog primjera font može doseći 16,8 px.
5 bodova, mreža
Rem su korisni za više od puke kalibracije fonta. Na primjer, mogli bismo temeljiti cijeli grid sustav ili UI biblioteku na korištenju veličine HTML font root rem, te koristiti njihov izračun na određenim mjestima. To bi nam dalo predvidljiviju kalibraciju i izračune fonta.
Spremnik (širina: 70 rem; // 70 * 14 px = 980 px )
Koncept iza ideje je omogućiti našem sučelju da bude proporcionalno veličini sadržaja. Iako nije nužno da u svakom slučaju ima isto značenje.
vh i vw
Responzivne tehnike web dizajna oslanjaju se na u Velikoj mjeri, na pravilu postotka. Međutim, postotak CSS-a nije uvijek takav Najbolja odluka za svaki problem. Širina CSS-a je relativna u odnosu na najbliži element koji sadrži roditelj. Što ako želimo koristiti širinu ili visinu okvira za prikaz umjesto širine izvorni element? Upravo to pomažu jedinice vh i vw.
Vh element je 1/100 visine okvira za prikaz. Na primjer, ako je visina preglednika 900px, 1vh može biti čak 9px. Također ako je širina okvira za prikaz 750px, 1vw može doseći 7,5px.
Čini se da se ovo pravilo može koristiti beskonačno. Na primjer, vrlo jednostavan način za postizanje pomoću jednog jedinog CSS nizovi Tobogani pune ili približno pune visine mogu biti:
Tobogan (visina: 100vh;)
Recimo da želite napraviti naslov koji ispunjava cijelu širinu zaslona. Da biste to učinili, trebate postaviti veličinu fonta na vw. Ova će veličina biti usporediva sa širinom preglednika.
vmin i vmax
Dok su vh i vm uvijek povezani s visinom i širinom okvira za prikaz, vmin i vmax također su povezani s maksimumom i minimumom te visine i širine, ovisno o tome koja je manja, a koja veća. Na primjer, ako preglednik ima postavke širine 1100 piksela i visine 700 piksela, 1vmin bi bio 7px, a 1vmax bi bio 11px. Međutim, ako je širina postavljena na 800px, a visina na 1080px, tada će vmin biti 8px dok će vmax biti postavljen na 10,8px.
U kojim slučajevima možete koristiti ove vrijednosti?
Zamislite da želite element koji u svakom trenutku ostaje vidljiv na ekranu. Koristeći visinu i širinu, postaviti po vrijednosti vmin ispod 100 omogućit će vam da to postignete. Na primjer, kvadratni element koji dodiruje najmanje dva dijela zaslona mogao bi se definirati ovako:
Kutija (visina: 100vmin; širina: 100vmin;)
Ako želite kvadrat koji će pokriti cijelo vidljivo područje prozora, koristite ista pravila, osim vmax.
Kutija (visina: 100vmax; širina: 100vmax;)
Kombinacija ovih pravila omogućit će vam korištenje veličine vašeg prozora vrlo fleksibilno i uz maksimalnu produktivnost.
ex i ch
Jedinice ex i ch, kao i em i rem, odnose se na trenutni font i veličina fonta. Međutim, budući da se temelje na mjerama specifičnim za font, ex i ch također se preslikavaju na obitelj fontova, za razliku od em i rem.
Jedinica ch ili znakovna jedinica definirana je kao "bolja mjera" širine znaka 0. Ovaj koncept je izazvao mnogo rasprava, ali osnovna ideja je da imati font fiksna širina, kvadrat sa širinom od N oznaka jedinice, kao što je širina: 40ch; uvijek može sadržavati niz od 40 znakova u ovome određeni font. Dok normalno korištenje ovaj posebno pravilo leži u rasporedu brajice, mogućnosti za kreativnost ovdje, naravno, nadilaze ove jednostavne izjave.
Ex jedinica je definirana kao "x-visina trenutnog fonta ILI jedna sekunda od em". Thex-visina ovog fonta - visina mala slova x tog fonta. Najčešće je to oko srednje oznake fonta.
Postoji mnogo područja u kojima se takve jedinice mogu koristiti. Najčešće u tiskari. Na primjer, element sup, koji djeluje kao superskript, može se dodati retku pomoću odgovarajućeg položaja i konačna vrijednost 1 pr. Isto tako, možete resetirati donji element. Pogreške preglednika popravljaju pravila okomitog poravnanja koja su specifična za gornji i donji indeks, ali ako želite više kontrole, možete pokušati sljedeće:
Sup ( pozicija: relativno; dno: 1ex; ) sub ( pozicija: relativno; dno: -1ex; )
Zaključak
Važno je pratiti razvoj i širenje CSS-a, kao i učiti o novim alatima i dodavati ih na svoj popis vještina. Najvjerojatnije ćete naići na probleme koji se mogu riješiti uz pomoć ovih jedinica. Uzmite si vremena i pročitajte specifikaciju. Pretplatite se na ažuriranja cssweeklyja. I naravno, ne zaboravite se pretplatiti na tjedna ažuriranja i besplatne video upute na Tuts+!
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 okvira za prikaz (dodaje se širina trake za pomicanje), pa ako postavite širinu elementa na 100vw, on će ići dalje od html-a.
Riža. 1. Pozadinska slika preko cijelog zaslona širine 100vw 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 postoci su daleko od najboljeg rješenja za svaki slučaj, budući da se izračunavaju u odnosu na veličinu najbližeg nadređeni element. 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, body").animate(( scrollTop: movePos), 600 ));
Visina navedena s vh također se može koristiti za centriranje elementa na stranici.
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 okvira preglednika. Postoje četiri cjeline povezane s prozorom.
Usredotočit ću se na prva dva jer se najčešće koriste. U mnogim slučajevima jedinice prikaza (vh i vw) preklapaju se s postocima u smislu mogućnosti. 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 jedinice vh je stvaranje pozadinska slika, koji se proteže cijelom visinom i širinom zaslona, bez obzira na veličinu uređaja. Ovo je vrlo lako učiniti.
Bg ( pozicija: relativna; 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.
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
: vw, vh i vmin. Nedavno ih podržava i razvojna verzija Chromea (broj 20), što daje nadu da će programeri drugih preglednika slijediti ovaj primjer. Zapravo, ovo bi bilo korisno, jer je vrlo zgodno i praktično, a ja ću vam pokušati reći zašto je to tako.
Zašto je ovo cool?
Mnogo razloga. Evo dva od njih:
- Postoji nešto poput duljine retka teksta pri kojoj je čitanje ugodno. Ne želim pokretati holiwar, ali recimo da ima 80 znakova. Dakle, ove mjerne jedinice vam omogućuju održavanje ove vrijednosti na bilo kojoj veličini zaslona
- Također mogu prilagoditi odnos naslova prema tijelu teksta, kao, na primjer, u jednom od postova Trenta Waltona (engleski)
Kako radi?
Jedinica svake od ove tri vrijednosti je 1% veličine zaslona. Na primjer, ako je veličina zaslona 40 centimetara u širinu, tada je 1vw jednak 0,4 cm.
1vw= 1% širine prozora
1vh= 1% visine prozora
1vmin= 1vw ili 1vh, što god je manje
Korištenje
Oh, vrlo je jednostavno:
H1 (veličina fonta: 5,9vw; ) h2 (veličina fonta: 3,0vh; ) p (veličina fonta: 2vmin; )
Podrška za preglednik
Chrome 20+ I IE 10+
Provjerio sam u Opera Next (12), Safari 5.2 i Firefox Beta (13) - bezuspješno.
Demo
Kratki video koji prikazuje korištenje vw:
Možete sami isprobati (provjerite podržava li vaš preglednik ove mjerne jedinice)
Bube
Postoji podrška u Chromeu 20, ali je malo neujednačena. Kada se promijeni veličina prozora preglednika, font se ne prilagođava novoj veličini prozora. Specifikacija kaže:
Ako se visina ili širina prozora promijeni, oni se sukladno tome skaliraju
Poslao sam zahtjev alatu za praćenje bugova. Možda to i nije veliki problem, font se ipak mijenja pri učitavanju "čiste" stranice. Takve sitnice su zanimljive samo nama, dizajnerskim geekovima koji se prema takvim stvarima odnosimo pažljivo, ali ipak.
Da biste riješili ovaj problem (dopustili promjenu veličine bez ponovnog učitavanja stranice), morate prisiliti element na ponovno crtanje. Koristio sam jQuery i upravo eksperimentirali s vrijednostima z-indeksa svakog elementa koji uzrokuje ponovno crtanje.
CauseRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() ( causeRepaintsOn.css("z-index", 1); ));
Ne samo veličina fonta
Usput, ovo su samo neki. Kao em , px , što god. Možete ih koristiti posvuda, nisu ograničeni samo veličinom fonta.
Iskoristi!
Izvorna upotreba
Ne zaboravite ostaviti povratni poziv za one preglednike koji još ne podržavaju ove jedinice:
H1 (veličina fonta: 36px; veličina fonta: 5,4vw; )
Provjera podrške
Modernizr još nema test za ovu provjeru, ali to možete sami provjeriti pomoću male JS skripte.
Var testEl = $("#vw-test"); var viewport = $(prozor); testEl.css((širina: "100vw" )); if (testEl.width() == viewport.width()) ( $("html").addClass("vw-support"); ) else ( $("html").append("vw-unsupported") ;
Imitacija funkcionalnosti s FitText.js
Ova ideja je da povezuje ukupnu širinu zaglavlja sa širinom nadređenog elementa, što je ono što FitText.js radi. Istina, on to radi kroz Javascript, matematiku, span oznake i hrpu drugih stvari. U teoriji, možete pokrenuti provjeru i koristiti Modernizr.load za učitavanje FitText.js ako nema podrške.
