Unități de vizualizare vs procente. Unități vh, vw, vmin, vmax

Au fost adăugate noi unități relative la CSS3, cum ar fi vh, vw, vmin, vmax. Aceste unități sunt calculate în funcție de dimensiunea ferestrei browserului. Pentru computere desktop lățimea ferestrei browserului mai multa latime viewport (se adaugă lățimea barei de derulare), așa că dacă setați lățimea elementului la 100vw, acesta va depăși html.

Orez. 1. Imagine de fundal pe ecran complet cu lățimea 100vw

Suport pentru browser

IE: 9.0 cu excepția vmax, utilizați vm în loc de vmin
Margine: 12.0, cu excepția vmax, utilizați vm în loc de vmin
Firefox: 19.0
Chrome: 26.0
Operă: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome pentru Android: 55.0

1. Unitățile vh și vw

Tehnici design web receptiv se bazează pe utilizarea valorilor procentuale. Dar interesul este departe de a fi cea mai buna solutie pentru fiecare caz, deoarece acestea sunt calculate în raport cu dimensiunea celui mai apropiat element părinte. Prin urmare, dacă doriți să utilizați înălțimea și lățimea ferestrei browserului, este mai bine să utilizați unități vh și vw. De exemplu, dacă înălțimea ferestrei browserului este de 900 px, atunci 1vh va fi de 9 px. De asemenea, dacă lățimea ferestrei browserului este de 1600 pixeli, atunci 1vw va fi de 16 pixeli.

1.1. Imagine de fundal receptivă pe tot ecranul

Deoarece lățimea elementului specificat cu 100vw este mai mare decât lățimea ferestrei de vizualizare, pentru a crea ecran complet imagini de fundal Este mai bine să folosiți o lățime de 100%, care va fi egală cu lățimea elementului html rădăcină.

Fullscreen-bg ( fundal: url(image.jpg); poziția fundal: centru; dimensiunea fundal: coperta; lățime: 100%; înălțime: 100vh; ) Orez. 2. Imagine de fundal receptivă pe tot ecranul

1.2. Efect de diapozitiv pe întreaga pagină

Pentru a bloca întreaga înălțime a ferestrei browserului, trebuie să setați înălțimea: 100%; pentru trei elemente - html, body și direct pentru blocul în sine:

Html, corp ( înălțime: 100%; ) secțiune ( înălțime: 100%; )

Deoarece dimensiunile procentuale sunt calculate în raport cu valorile elementelor părinte, trebuie să setați valorile adecvate pentru fiecare element DOM. Unitatea de măsură vh nu necesită înlănțuire a valorilor, deoarece valoarea sa este calculată direct în raport cu fereastra browserului:

Secțiune (înălțime: 100vh; )

Efectul răsfoirii diapozitivelor când faceți clic pe săgeată este implementat folosind scenariu mic jQuery:

JQuery(document).ready(function($) ( $("nav").on("clic", function() ( if ($(this).hasClass("jos")) ( var movePos = $(window) ).scrollTop() + $(window).height(); if ($(this).hasClass("sus")) ( var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, body").animate(( scrollTop: movePos), 600 ));

Înălțimea specificată cu vh poate fi folosită și pentru a centra un element pe pagină.

CSS3 are noi unități de măsură. (Cred că am vorbit deja despre asta. ing) Ați auzit deja despre px, pt, em și noul rem. Să ne uităm la câteva: vw și vh.

Adesea există elemente într-un aspect care se potrivesc garantat în fereastra de vizualizare a browserului. ÎN caz general JavaScript este folosit pentru aceasta. Să verificăm dimensiunea ferestrei de vizualizare și să redimensionăm elementele în consecință. Dacă utilizatorul redimensionează fereastra browserului, procedura se repetă.

Folosind vw/vh putem seta dimensiunea elementelor în raport cu dimensiunea ferestrei de vizualizare. Unitățile vw/vh sunt interesante deoarece 1vw este o unitate egală cu 1/100 din lățimea ferestrei de vizualizare Pentru a atribui unui element o lățime egală cu lățimea ferestrei de vizualizare, de exemplu, trebuie să setați lățime: 100vw.

Cum poate fi folosit

Lightbox-urile sunt un candidat excelent pentru utilizarea vw și vh, deoarece sunt de obicei poziționate în raport cu fereastra de vizualizare, cu toate acestea, găsesc că poziția: fixă ​​cu valorile de sus, jos, stânga și dreapta este mai ușor de utilizat, deoarece nu trebuie să setați înălțimea și lățimea deloc.

Puteți utiliza noile unități pentru a seta dimensiunile elementelor care sunt în flux normal. De exemplu, pot posta capturi de ecran pe pagină. Înălțimea acestor capturi de ecran nu trebuie să depășească înălțimea ferestrei de vizualizare. Pentru asta pot seta inaltime maxima imagini:

Imag (înălțime maximă: 95vh; )

ÎN în acest caz, Am setat înălțimea la 95vh pentru a lăsa puțin spațiu în jur când sunt pe ecran.

Suport pentru browser

Dacă rem este acceptat de aproape toate browserele majore, inclusiv IE9, atunci folosirea vw și vh merită să rețineți. Pe în acest moment doar îi sprijină Internet Explorer 9.

Unități Dimensiuni CSS joacă un rol important în crearea site-urilor web și stabilirea dimensiunilor diferitelor elemente. Valori CSS poate fi exprimat ca pozitiv sau numere negative, deși unele proprietăți acceptă doar numere pozitive. Valoare numericăînsoțită de o abreviere din două litere care reprezintă unitatea reală de lungime. De exemplu, cm (centimetri), px (pixeli) sau em CSS. Excepția de la această regulă este valoarea 0 (zero), care nu necesită o unitate de măsură.

Unitățile CSS sunt de două tipuri: absolute și relative.

Unități de lungime absolută în CSS

Unitățile CSS absolute nu sunt potrivite pentru web design. Acestea reprezintă reprezentări digitale ale rezultatelor măsurătorilor în lumea fizică și sunt independente de dimensiunea și rezoluția ecranului. Lungimile absolute cu aceeași valoare pot diferi prin diferite ecrane. Acest lucru este cauzat de diferențele de DPI (puncte pe inch) pe ecran.

Ecranele de înaltă rezoluție au un DPI mai mare decât ecranele cu rezoluție mai mică, ceea ce face ca imaginile și textul să pară mai mici. Unitățile absolute sunt folosite pentru a defini stilurile în imprimare, unde măsurătorile au loc în inci, puncte și pica.

Unități absolute de lungime:

• cm (centimetri);
• mm (milimetri);
• în (inci);
• pc(vârfuri);
• pt(puncte);
• px (pixeli).

Cele mai multe unități absolute de lungime sunt inutile pe Internet. Singura excepție este px. Pixelii sunt unități relative în raport cu rezoluția ecranelor. Pentru imprimante și monitoare cu foarte rezoluție înaltă un pixel în CSS este egal cu câțiva pixeli de pe ecran, astfel încât numărul de pixeli pe inch este de aproximativ 96. Un pixel este cea mai mică unitate de măsură și este folosit în mod obișnuit ca referință pentru alții.

Unități de lungime relativă în CSS

Unități relative Dimensiunile de lungime în CSS nu au valori fixe. Semnificațiile lor depind de altele valorile stabilite sau funcții. Sunt mai populare în designul web, deoarece facilitează determinarea dimensiunii unui element. Cu ajutorul lor, puteți seta lățimea, înălțimea, dimensiunea fontului etc. în raport cu alți parametri de bază.

Unități relative în funcție de font

Unitățile relative dependente de font sunt menționate în avans setat dimensiunea valoarea fontului sau a familiei de fonturi:

• ex(înălțimea caracterului x);
• ch( lățimea caracterelor zero (0));
• em unitate în CSS (înălțimea fontului elementului curent);
• rem( dimensiunea fontului elementului rădăcină).

ex

Definit ca „ înălțimea caracterului x a fontului curent SAU jumătate de 1 em" Adică înălțimea literei minuscule x font instalat. Când modificați valoarea proprietății familiei de fonturi, unitatea ex se modifică.

cap

Egal cu lățimea caracterului 0 . Această unitate de măsură se modifică și atunci când se modifică valoarea proprietății familiei de fonturi.

ei

Unitatea CSS em are o valoare egală cu dimensiunea fontului corpului sau elementului părinte. De exemplu, dacă dimensiunea fontului unui element părinte este 30px, atunci o valoare de 1em va fi calculată ca 30px (30 x 1) pentru toate elementele secundare. Numărul nu trebuie să fie un număr întreg. Dacă în exemplu înlocuim 1em cu 0,5, atunci valoarea va fi 15px (30 x 0,5).

Unitatea em preia valoarea etichetei părinte. Acest lucru poate duce la rezultate nedorite atunci când se utilizează elemente imbricate.

Să presupunem că avem trei elemente imbricate. Primul element (rădăcină) are o dimensiune a fontului de 30px, iar cele două elemente imbricate au o dimensiune a fontului de 2em. Elementul imbricat sub rădăcină va avea o dimensiune a fontului calculată ca 60px (30 x 2). Și elementul imbricat în el va avea o dimensiune a fontului calculată ca 120px (60 x 2).

rem

rem este similar cu CSS em , dar valoarea sa rămâne întotdeauna egală cu dimensiunea fontului elementului rădăcină. Unitatea rem este utilă atunci când dezvoltați site-uri web receptive, deoarece vă permite să scalați întreaga pagină prin modificarea dimensiunii fontului în elementul HTML.

Unități de lungime procentuale bazate pe dimensiunea ferestrei de vizualizare

Zona de vizualizare se bazează pe lățimea și înălțimea ferestrei de vizualizare și include:

• vh( înălțimea ferestrei);
• vw( lățimea ferestrei de vizualizare);
• vmin( cel mai mic dintre (vw, vh));
• vmax ( cel mai mare dintre (vw, vh)).

vw

Aceasta este lățimea ferestrei de vizualizare. 1vw este egal cu 1/100 din lățimea ferestrei de vizualizare. Un pic ca procentele, cu excepția faptului că valoarea rămâne aceeași pentru toate elementele, indiferent de lățimea elementelor părinte. De exemplu, dacă lățimea ferestrei este de 1000px, atunci 1vw va fi egal cu 10px.

vh

La fel ca vw ( lățimea ferestrei de vizualizare), doar această unitate de măsură depinde de înălțimea zonei de vizualizare. 1vh este egal cu 1/100 din înălțimea de vizualizare. De exemplu, dacă înălțimea ferestrei browserului este de 900 px, atunci 1vh ar fi 9px.

vmin

Vmin este egal cu 1/100 din valoarea minimaîntre înălțimea și lățimea ferestrei de vizualizare. Cu alte cuvinte, 1/100 din latura cu cea mai scurtă lungime. De exemplu, dacă dimensiunile ferestrei 1200 x 800 pixeli, atunci valoarea vmin va fi 8px .

vmax

vmax este egal cu 1/100 din valoarea maximă dintre înălțimea și lățimea ferestrei de vizualizare. Cu alte cuvinte, 1/100 din latura cu cea mai mare lungime. De exemplu, dacă dimensiunile ar fi 1200 x 800 pixeli, atunci vmax este 12px .

% dobândă

Distanța specificată ca procent depinde de lungimea elementului părinte. De exemplu, dacă un element părinte are 1000 px lățime și copilul său este 50% din acea valoare, atunci lățimea element copil va fi 500px.

SUPORT DE BROWSER

em CSS, ex, px, cm, mm, in, pt și pc

sunt acceptate în toate browserele, inclusiv în versiunile mai vechi de IE.

CSS folosește unități absolute și relative pentru a dimensiona diferite elemente. Unitățile absolute sunt independente de dispozitivul de ieșire, dar unitățile relative definesc dimensiunea unui element în raport cu valoarea unei alte dimensiuni.

Unități relative

Unitățile relative sunt de obicei folosite pentru a lucra cu text. În tabel 1 enumeră principalele unități relative.

Unitatea em este valoare modificabilă, care depinde de dimensiunea fontului elementului curent (dimensiunea este setată prin proprietatea stil font-size). Fiecare browser are o dimensiune de text încorporată care este utilizată atunci când această dimensiune nu este specificată în mod explicit. Prin urmare, inițial 1em este egal cu dimensiunea implicită a fontului a browserului sau cu dimensiunea fontului elementului părinte. Notarea procentuală este identică cu em, prin aceea că valorile 1em și 100% sunt egale.

Unitatea ex este definită ca înălțimea caracterului „x” minuscul. ex este supus acelorași reguli ca em , și anume că este legat de dimensiunea implicită a fontului a browserului sau de dimensiunea fontului elementului său părinte.

Unitatea ch este egală cu lățimea caracterului „0” pentru elementul curent și, ca și em, depinde de dimensiunea fontului.

Diferența dintre em și rem este următoarea. em depinde de dimensiunea fontului părintelui elementului și se modifică odată cu acesta, iar rem este legat de element rădăcină, adică dimensiunea fontului specificată pentru elementul html.

Există, de asemenea, un grup de unități relative legate de dimensiunea ferestrei de vizualizare a browserului. În tabel 2 arată o listă a acestora cu o descriere.

Unități absolute

Unitățile absolute reprezintă dimensiuni fizice- inci, centimetri, milimetri, puncte, pic și pixeli. Pentru dispozitivele cu dpi scăzut (numărul de pixeli pe inch determină densitatea pixelilor), legarea este pe pixel. În acest caz, un inch este egal cu 96 de pixeli. Evident, inch real nu se va potrivi cu inch pe un astfel de dispozitiv. Pe dispozitivele cu DPI ridicat, inch real este același cu inch de pe ecran, astfel încât dimensiunea pixelilor este calculată ca 1/96 de inch. În tabel 3 enumeră unitățile absolute de bază.

Exemplu

antet de 30 px

Dimensiunea textului 1,5 em

Titlu de 24 de puncte

Deplasați textul la dreapta cu 30 de milimetri

Nota

Când setați dimensiuni, asigurați-vă că specificați unitățile de măsură, de exemplu lățime: 30px. În caz contrar, browserul nu va putea afișa rezultatul dorit deoarece nu înțelege ce dimensiune ai nevoie. Unitățile nu sunt adăugate numai când valoare zero(marja: 0).

Internet Explorer acceptă unitatea vm în loc de vmin .

Caietul de sarcini

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

×

Când lucrați cu CCS, este foarte ușor să rămâneți blocat la un moment dat, deoarece uneori chiar și atunci când lucrați folosind o metodă familiară, se întâmplă să apară noi probleme.

Pe măsură ce Internetul crește, crește și cererea de soluții noi. Și din moment ce tu și cu mine suntem designeri web și dezvoltatori front-end, nu avem altă opțiune decât să putem lucra cu diverse opțiuni și să putem lucra bine.

Aceasta înseamnă că trebuie să putem lucra bine chiar și cu acele instrumente specifice care sunt de obicei folosite foarte rar, dar există situații când sunt necesare.

Astăzi vrem să vă vorbim despre câteva Instrumente CSS. Fiecare dintre aceste instrumente este ca o unitate de măsură, cum ar fi pixeli sau ems, dar cel mai probabil nu știați despre ele.

Să începem cu ceva care arată ca ceva cu care probabil ești deja familiarizat. Unitatea em este definită ca dimensiunea fontului curent. Deci, dacă, de exemplu, setați dimensiunea fontului pe elementul body, atunci valoarea em a oricărui element inferior din corp va fi egală cu dimensiunea fontului respectiv.

body ( dimensiunea fontului: 14px; ) div (dimensiunea fontului: 1.2em; // calculat la 14px * 1.2 sau 16.8px )

Aici am scris că dimensiunea fontului div-ului va fi 1.2em. Aceasta este de 1,2 ori mai mare decât dimensiunea fontului de la care a moștenit, care era de 14 px. Deci rezultatul este 16.8px.

Cu toate acestea, ce se întâmplă dacă puneți în cascadă dimensiunile fonturilor definite de em una în cealaltă? În pasajul următor aplicăm același CCS ca mai sus. Fiecare div moștenește o dimensiune de font de la părintele său, oferindu-ne dimensiuni de font din ce în ce mai mari.

Deși acest lucru poate fi adecvat în unele cazuri, de multe ori dorim să ne bazăm pur și simplu pe o singură măsurătoare pentru măsurare. În acest caz, ar trebui să folosim rem. „r” în rem înseamnă „rădăcină”; este egală cu dimensiunea fontului stabilită în elementul rădăcină; în majoritatea cazurilor este un element HTML.

Html (dimensiunea fontului: 14px; ) div (dimensiunea fontului: 1.2rem; )

În toate cele trei div-uri din exemplul anterior, fontul poate ajunge la 16,8 px.

5 puncte, Grilă

Rem sunt utile pentru mai mult decât doar calibrarea fontului. De exemplu, am putea baza un întreg sistem de grilă sau o bibliotecă UI pe utilizarea dimensiunii font HTML root rem și folosiți calculul lor în anumite locuri. Acest lucru ne-ar oferi o calibrare și calcule mai previzibile a fontului.

Container (lățime: 70 rem; // 70 * 14px = 980px )

Conceptul ideii este de a permite interfeței noastre să fie proporțională cu dimensiunea conținutului. Deși nu este necesar ca în fiecare caz să aibă același sens.

vh și vw

Tehnicile de design web responsive se bazează în mare măsură pe regula procentelor. Cu toate acestea Procent CSS nu este întotdeauna cea mai bună soluție pentru fiecare problemă. Lățimea CSS este legat de cel mai apropiat element care conține părintele. Ce se întâmplă dacă dorim să folosim lățimea sau înălțimea ferestrei în loc de lățime element original? Exact asta fac unitățile vh și vw.

Elementul vh are 1/100 înălțimea ferestrei de vizualizare. De exemplu, dacă înălțimea browserului este de 900 px, 1vh poate fi de până la 9 px. De asemenea, dacă lățimea ferestrei de vizualizare este de 750px, 1vw poate ajunge la 7,5px.

Se pare că această regulă poate fi folosită la nesfârșit. De exemplu, o modalitate foarte simplă de a realiza folosind un singur șiruri CSS Toboganele cu înălțimea completă sau cu înălțimea aproximativă pot fi:

Tobogan (înălțime: 100vh; )

Să presupunem că doriți să creați un titlu care să umple toată lățimea ecranului. Pentru a face acest lucru, trebuie să setați dimensiunea fontului la vw. Această dimensiune va fi comparabilă cu lățimea browserului.

vmin și vmax

În timp ce vh și vm sunt întotdeauna legate de înălțimea și lățimea ferestrei de vizualizare, vmin și vmax sunt, de asemenea, legate de maximul și minimul acelei înălțimi și lățimi, în funcție de care este mai mică și care este mai mare. De exemplu, dacă browserul are setări de 1100px lățime și 700px înălțime, 1vmin ar fi 7px și 1vmax ar fi 11px. Cu toate acestea, dacă lățimea este setată la 800px și înălțimea la 1080px, atunci vmin va fi de 8px, în timp ce vmax va fi setat la 10,8px.

În ce cazuri puteți folosi aceste valori?

Imaginați-vă că doriți un element care să rămână vizibil pe ecran în orice moment. Folosind înălțimea și lățimea, stabilite după valoare vmin sub 100 vă va permite să realizați acest lucru. De exemplu, un element pătrat care atinge cel puțin două părți ale ecranului ar putea fi definit astfel:

Cutie (înălțime: 100vmin; lățime: 100vmin; )

Dacă doriți un pătrat care să acopere întreaga zonă vizibilă a ferestrei de vizualizare, utilizați aceleași reguli, cu excepția vmax.

Cutie (înălțime: 100vmax; lățime: 100vmax; )

Combinația acestor reguli vă va permite să utilizați dimensiunea ferestrei dvs. de vizualizare în mod foarte flexibil și cu productivitate maximă.

ex și ch

Unitățile ex și ch, precum și em și rem, se referă la fontul și dimensiunea fontului curent. Cu toate acestea, deoarece se bazează pe măsuri specifice fontului, ex și ch, de asemenea, se mapează la font-family, spre deosebire de em și rem.

Unitatea ch, sau unitatea de caractere, este definită ca o „măsură îmbunătățită” a lățimii caracterului 0. Acest concept a provocat multe dezbateri, dar ideea de bază este că, având în vedere un font cu lățime fixă, un pătrat cu o lățime de N caractere unitare, cum ar fi lățimea: 40ch; poate conține întotdeauna o secvență de 40 de caractere în acel font special. în timp ce utilizare normală Această regulă particulară constă în plasarea braille-ului, posibilitățile de creativitate aici, desigur, se extind dincolo de aceste simple afirmații.

Unitatea ex este definită ca „înălțimea x a fontului curent SAU o secundă din em”. Thex-height a acestui font - înălțime litere mici x din acel font. Cel mai adesea, acesta este în jurul semnului din mijloc al fontului.

Există multe zone în care astfel de unități pot fi utilizate. Cel mai adesea în tipografie. De exemplu, elementul sup, care acționează ca un superscript, poate fi adăugat la linie folosind poziția corespunzătoare și valoarea finală 1ex. De asemenea, puteți reseta elementul de jos. Erorile de browser sunt remediate prin regulile de aliniere verticală specifice pentru indice și indice, dar dacă doriți mai mult control, puteți încerca următoarele:

Sup ( poziție: relativ; jos: 1ex; ) sub ( poziție: relativ; jos: -1ex; )

Concluzie

Este important să țineți pasul cu dezvoltarea și răspândirea CSS, precum și să învățați despre noi instrumente și să le adăugați la lista dvs. de abilități. Cel mai probabil, vei intampina probleme care pot fi rezolvate cu ajutorul acestor unitati. Fă-ți timp și citește specificațiile. Abonați-vă la actualizările de la cssweekly. Și, desigur, nu uitați să vă abonați la actualizări săptămânale și videoclipuri tutoriale gratuite pe Tuts+!