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 rezoluciji 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.
1 em= 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 responzivni 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 okvira prikaza relativne su 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. U ovom sam primjeru napravio crvenu granicu oko html elementa i ispunio odjeljke različitim bojama.
Zbog ove nijanse, bolje je napraviti elemente 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 roditeljski element, možemo dobiti element čija je visina jednaka visini ekrana samo ako njegov roditeljski element također zauzima cijelu visinu ekrana. To znači da element moramo postaviti kao fiksni kako bismo html element učinili nadređenim ili pribjeći korištenju nekog 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 ( 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.
Sekcija (š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 od najzbunjujućih aspekata CSS je aplikacija veličina fonta atribut za skaliranje teksta. Pomoću CSS-a možete promijeniti veličinu teksta u pregledniku koristeći četiri različite mjerne jedinice. Koja je od ove četiri jedinice najbolja za web? Pitanje je to koje je izazvalo razne rasprave i kritike. Teško je pronaći konačan odgovor jer je samo pitanje složeno.
Upoznajte jedinice
1. "Ems" (em): "em" je skalabilna jedinica koja se koristi u web dokumentima. "em" je jednak trenutnoj veličini fonta, na primjer, ako je veličina fonta u dokumentu 12pt, 1em je jednak 12pt. "em" je skalabilan po prirodi, tako da će 2em biti jednak 24pt, 0.5em će biti jednak 6pt, itd. Korištenje "em" postaje sve popularnije u web dokumentima zbog njegove skalabilnosti i mogućnosti da bude koristan na mobilnim uređajima.2. Pikseli (px): "px" su jedinice fiksne veličine koje se koriste na zaslonima (kao što je čitanje na zaslonu računala). Jedan piksel jednak je jednoj točki na zaslonu vašeg računala (najmanji element rezolucije vašeg zaslona). Mnogi web-dizajneri koriste px u web-dokumentima kako bi postigli pikselski savršen prikaz svoje web-lokacije kada se prikazuje u pregledniku. Jedan od problema s korištenjem px je taj što ove jedinice ne dopuštaju skaliranje za slabovidne čitatelje ili mobilne uređaje.
3. Bodovi (pt): "pt", tradicionalno se koristi u tiskanim medijima (sve što treba ispisati na papiru itd.). Jedan "pt" jednak je 1/72 inča. "pt", poput "px", imaju fiksnu jediničnu veličinu i ne mogu se skalirati.
4. Postoci (%): Postotne jedinice slične su "em" osim nekoliko ključnih razlika. Prvo, trenutna veličina fonta je 100% (tj. 12pt = 100%). Korištenjem "%" vaš tekst postaje potpuno skalabilan za mobilne uređaje i pristupačan korisniku (pristupačnost).
Pa u čemu je razlika?
Bit će lako razumjeti razliku između jedinica veličine fonta nakon što ih vidite na djelu. Tipično, 1em = 12pt = 16px = 100%. Koristeći ove veličine fonta, pogledajmo što se događa kada povećate osnovnu veličinu fonta (pomoću CSS izbornika tijela) sa 100% na 120%.Promjena veličine fonta sa 100% na 120%.
Kao što vidite, "em" i "%" su povećali veličinu fonta, dok "px" i "pt" nisu. Postavljanje apsolutne veličine za vaš tekst može biti jednostavno, ali je mnogo bolje za vaše posjetitelje da koriste skalabilni tekst koji se može prikazati na bilo kojem uređaju ili računalu. Iz tog razloga je bolje koristiti jedinice "em" i "%" za tekst web dokumenta.
"em" u odnosu na "%"
Doznali smo da jedinice "px" i "pt" nisu najbolje za web dokumente, što nas tjera da koristimo "em" i "%". U teoriji, jedinice "em" i "%" su identične, ali u praksi imaju manje razlike koje je važno uzeti u obzir.U gornjem primjeru koristili smo postotke (u oznaci tijela) kao osnovnu jedinicu veličine fonta. Ako promijenite osnovnu jedinicu veličine fonta iz "%" u "em" (tj. tijelo (veličina fonta: 1em;)), vi, trebao bi ne primjećuju razliku. Pogledajmo što se događa kada je "1em" naša osnovna jedinica i kada klijent promijeni "Veličinu fonta" u svojim postavkama preglednika (mnogi preglednici, poput Internet Explorera, imaju ovu opciju).
Veličina fonta kada klijent promijeni veličinu teksta u pregledniku.
Kada je veličina teksta postavljena na "srednje" u pregledniku klijenta, nema primjetne razlike između "em" i "%". Međutim, ako se parametar promijeni, razlika postaje vrlo velika. Kada je postavljeno na "Najmanji", "em" je mnogo manji od "%", a kada je postavljen na "Najveći", naprotiv, "em" se prikazuje mnogo veći od "%". I dok mnogi tvrde da se jedinice u "em" mjeri kako je i predviđeno, u praksi se tekst u "em" previše dramatično mjeri, uzrokujući da i najmanji tekst postane nečitljiv na nekim strojevima.
Presuda
U teoriji, jedinice "em" novi su i nadolazeći standard veličine fonta na webu, ali u praksi jedinice "%" omogućuju prikaz teksta dosljednijim i praktičnijim za korisnike. Prilikom mijenjanja parametara klijenta, tekst u "%" mijenjao se u razumnim omjerima, što omogućuje dizajnerima da zadrže čitljivost, pristupačnost i dizajn.Pobjednik: postotak (%).
Postoji nekoliko osnovnih mjernih jedinica u CSS-u: relativna i apsolutna. Kada radite s CSS-om, morate jasno razumjeti njihovu upotrebu, inače će rad s kaskadnim listovima stilova biti složen i nerazumljiv. Apsolutne mjerne jedinice dijele se na 5 vrsta, relativne na 4. Treba znati da Apsolutne mjerne jedinice ne ovise o izlaznom uređaju, tj. monitora i ekrana, dok relativni određuju veličinu elementa u odnosu na drugu veličinu, tj. monitor, zaslon, nadređeni element, itd. Sada više o njima.
Relativne mjerne jedinice.
Relativne mjerne jedinice obično se koriste za rad s tekstom i u "proširivim" izgledima. Sljedeća tablica prikazuje osnovne relativne mjerne jedinice.
E.M.
Izmjerena vrijednost ovisi o veličini fonta trenutnog elementa (postavlja se preko atributa font-size). Kada nije izričito postavljena, koristi se veličina teksta postavljena u pregledniku. Stoga je 1em inicijalno jednak zadanoj veličini fonta u pregledniku.
Npr
Ovaj argument je definiran kao visina malog slova "x". Ex je vezan na zadanu veličinu fonta postavljenu u pregledniku; ako nadređeni element ima postavljen atribut "font-size", tada je vezan na njega.
PX
Piksel je 1 točka razlučivosti izlaznog uređaja (monitor ili ekran). Oni. Ako je razlučivost vašeg monitora 1024*768 onda imate 1024 piksela vodoravno i 768 piksela okomito. Oni. Veličina piksela izravno ovisi o razlučivosti izlaznog uređaja i njegovim tehničkim karakteristikama.
%
Postotna mjerna jedinica ovisi o dimenzijama nadređenog elementa.
Apsolutne mjerne jedinice.
Apsolutne mjerne jedinice koriste se rjeđe i uglavnom u radu s tekstom. Sljedeće tablice prikazuju apsolutne mjerne jedinice.
Od ovih jedinica treba opisati samo pt (bod), jer pc je izvedenica od pt i upotrebu in, cm i mm ne treba opisivati.
Bod je najčešća i široko korištena mjerna jedinica za fontove (sjećate se kako su postavljali veličinu fonta u Wordu ili Open Officeu?).
CSS3 ima nove mjerne jedinice. (Mislim da sam već govorio o ovome. inž) Već ste čuli za px, pt, em i novi rem. Pogledajmo još nekoliko: vw i vh.
Često postoje elementi u izgledu za koje se jamči da će stati u okvir preglednika. Općenito, za to se koristi JavaScript. Provjerimo veličinu prozora i promijenimo veličinu elemenata u skladu s tim. Ako korisnik promijeni veličinu prozora preglednika, postupak se ponavlja.
Pomoću vw/vh možemo postaviti veličinu elemenata u odnosu na veličinu prozora. Jedinice vw/vh su zanimljive jer je 1vw jedinica jednaka 1/100 širine okvira za prikaz Da biste elementu dodijelili širinu koja je jednaka širini okvira za prikaz, na primjer, trebate postaviti width:100vw.
Kako se može koristiti
Lightboxovi su sjajni kandidati za korištenje vw i vh jer su obično postavljeni u odnosu na okvir za prikaz, no smatram da je položaj: fiksni s gornjom, donjom, lijevom i desnom vrijednostima lakši za upotrebu jer ne morate postavljati visinu i širinu uopće.Možete koristiti nove mjerne jedinice za postavljanje veličina elemenata koji su u normalnom toku. Na primjer, mogu objaviti snimke zaslona na stranici. Visina ovih snimki zaslona ne smije prelaziti visinu okvira za prikaz. Da bih to učinio, mogu postaviti maksimalnu visinu slika:
Slika (max-height:95vh;)
U ovom slučaju postavljam visinu na 95vh kako bih ostavio malo prostora kad su na zaslonu.
