Valori css relative. Unități vh, vw, vmin, vmax

Unități Dimensiuni CSS sunt folosite pentru a specifica cantități în diferite proprietăți. Ele sunt împărțite în absolute și relative.

Unități absolute

Unitățile de măsură absolute includ centimetri (cm), milimetri (mm) și inci (inchi). Deși sunt concepute pentru a afișa elemente pe o pagină web în mod uniform, browserul nu poate calcula întotdeauna cu exactitate dimensiunea fizică a afișajului sau a monitorului, deci diferite dispozitive elementele pot avea dimensiuni diferite.

Un cm (dimensiunea fontului: 1cm; ) .one-mm (dimensiunea fontului: 1mm; ) .one-in (dimensiunea fontului: 1in; )

De obicei, aceste unități de măsură sunt utilizate atunci când se specifică dimensiunea pentru imprimarea paginilor.

Unități tipografice

Unitățile de măsură tipografice includ punctele (pt) și vârfurile (pc). Un punct (1pt) are o dimensiune fixă ​​de 1/72" în timp ce un pic (1pc) este de 1/6" (1pc = 12pt). Aceste două unități de măsură sunt cele mai utile în stilurile scrise pentru documente tipărite, mai degrabă decât pentru utilizarea pe ecrane.

Un punct (dimensiunea fontului: 1pt; ) .one-pica (dimensiunea fontului: 1buc; )

Unități relative

Unitățile de măsură relative includ pixeli (px) și procentele (%). Un procent este o unitate de măsură care nu are nicio legătură directă cu dimensiunea fontului unui element sau cu dimensiunea elementului în sine. Valoarea unei proprietăți setată ca procent depinde direct de valoarea aceleiași proprietăți stabilite pentru element părinte. De exemplu, dimensiunea fontului este setată în raport cu dimensiunea fontului elementului părinte, iar înălțimea și lățimea sunt exprimate ca procent în raport cu înălțimea și lățimea zonei de conținut a elementului părinte.

One-pixel (dimensiunea fontului: 1px; ) .one-percent (dimensiunea fontului: 1%; )

Pixel este un punct egal cu un pixel fizic de pe ecran. Cu toate acestea, browserele nu calculează întotdeauna cu exactitate dimensiunea ferestrei de vizualizare în pixeli.

Să luăm în considerare ultimele modele laptopuri, tablete si smartphone-uri dotate cu ecrane cu rezoluție înaltă. Pe astfel de dispozitive, browserul nu corelează unitatea px cu numărul de pixeli fizici de pe ecran. În schimb, normalizează unitatea px pentru a aduce experiența de vizualizare mai aproape de cea a unui monitor desktop tradițional, cu densități de pixeli variind de la 96 la 120 de pixeli/inch. Ca rezultat, un pătrat cu o latură de 10px poate fi desenat de browser pe un smartphone, astfel încât să existe de la 15 până la 20 de pixeli fizici pe fiecare parte. Aceasta înseamnă că px se întâmplă să fie și o unitate de măsură relativă.

Unități relative dependente de font

Două unități de măsură relative suplimentare sunt em și ex. Em este înălțimea fontului curent, ex este înălțimea caracterului "x" minuscul din fontul specificat.

One-ex (dimensiunea fontului: 1ex; ) .one-em (dimensiunea fontului: 1em; )

La fel ca procentele, em este o unitate de măsură comună folosită în mod obișnuit pentru a seta dimensiunea fontului pentru textul de pe o pagină web.

CSS3 introduce două unități de măsură suplimentare: rem și ch. Rem - dimensiunea fontului elementului rădăcină ( ), poate fi folosit în loc de em pentru a preveni dimensiunea fontului părinte sau strămoș să afecteze dimensiunea fontului elementului curent.

One-rem (dimensiunea fontului: 1rem; )

Unitatea ch este egală cu lățimea caracterului zero (0) din fontul elementului. Utilizarea acestuia poate fi utilă pentru a determina lățimea unui câmp care conține text, deoarece 1ch corespunde aproximativ unui caracter.

Unitatea ch este acceptată numai în Chrome 27+, Firefox 19+ și IE9. Rem este acceptat în Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ și Opera 11.6+.

Unități de vizualizare

Unitățile de vizualizare includ vw (lățime) și vh (înălțime), care vă permit să scalați elementele în raport cu fereastra, care este partea vizibilă a paginii web.

Latime: 50vw; /* 50% din lățimea ferestrei de vizualizare */ înălțime: 25vh; /* 25% din înălțimea ferestrei de vizualizare */

Două unități suplimentare sunt vmin și vmax, care specifică valoarea minimă sau maximă a dimensiunii ferestrei de vizualizare.

Latime: 1vmin; /* 1vh sau 1vw, oricare dintre acestea este mai mic */ înălțime: 1vmax; /* 1vh sau 1vw, oricare dintre acestea este mai mare */

Unitățile de vizualizare relative sunt acceptate în Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ și Opera 15+.

Valori unitare

Valorile nu trebuie să fie specificate ca numere întregi; zecimale. Unele proprietăți vă permit, de asemenea, să specificați valori negative ca valori.

P ( dimensiunea fontului: 0,394 in; ) /* zecimal */ p ( marja: -1px; ) /* valoare negativă */

Rețineți că declarația nu va funcționa dacă unitatea de măsură este precedată de un spațiu sau dacă unitatea de măsură nu este specificată (cu excepția unei valori zero). Dacă se folosește zero ca valoare, unitatea de măsură poate fi omisă.

P ( dimensiunea fontului: 1ex; ) /* corect */ p ( mărimea fontului: 0; ) /* corect */ p ( mărimea fontului: 0ex; ) /* corect */ p ( mărimea fontului: 1 ex; ) ; ) /* incorect */ p ( font-size: 1; ) /* incorect */

Ori de câte ori o declarație CSS conține o eroare, aceasta este ignorată de browser, în timp ce restul declarației continuă să funcționeze.

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 responsive 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 dimensiunile 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 pixeli, atunci 1vh va fi de 9 pixeli. De asemenea, dacă lățimea ferestrei browserului este de 1600px, atunci 1vw va fi de 16px.

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ă.

Salutări, dragi cititori ai blogului webcodius! Pentru a seta dimensiunile diferitelor elemente pagini html, CSS are unități de măsură. Mai mult, pot fi utilizate atât unități relative, cât și absolute.

Unități absolute conectat la lumea fizică și independent de dispozitivul de ieșire. Următoarele unități pot fi folosite pentru a le indica:

Unitățile absolute sunt folosite mai puțin frecvent decât unitățile relative și sunt folosite în principal pentru a seta dimensiunea textului. Și pentru a indica dimensiunea textului, folosesc în principal un punct (pt), care se obține prin împărțirea unui inch în 72 de părți. Un inch, la rândul său, este egal cu aproximativ 25,4 milimetri, respectiv, un punct este aproximativ egal cu o treime de milimetru. Un exemplu de utilizare a unităților de măsură absolute:

Dimensiune 12 milimetri

Dimensiune 1 centimetru

Dimensiune 1 inch

Dimensiune 24 de puncte

Vârf mărime 1

Unități de măsură relative

Pentru a afișa informații pe monitor, este mai bine să utilizați unități de măsură relative. Deoarece dimensiunea fizică a punctelor (pixeli) care formează imaginile pe monitor poate varia în funcție de tipul și dimensiunea fizică a monitorului însuși. De asemenea, dimensiunea pixelilor depinde rezoluție stabilită ecran. Unități relative de bază:

1 px în CSS, așa cum am spus mai sus, acesta este un punct de pe ecranul utilizatorului, mărime fizică care depinde de rezoluția dispozitivului și de distanța de la care o persoană privește suprafața acestuia.
La specificarea procentelor, dimensiunea este calculată pe baza dimensiunii elementului părinte. Deci, de exemplu, dacă lățimea elementului părinte este de 500px, atunci dacă specificați lățime:50%, lățimea elementului va fi de 250px.

ei este legat de dimensiunea implicită a fontului a browserului sau de dimensiunea fontului elementului părinte. O ex este înălțimea literei majuscule (mică) „x” (x) în Aspect latin. Adică, em este, de asemenea, legat de dimensiunea implicită a fontului din browser sau de dimensiunea fontului elementului părinte. Exemple:

Dimensiune 20 pixeli

Dimensiune 150%

Marimea 2 em

Marimea 2 ex

Rezultat:

În plus față de cele de mai sus, există un grup de unități relative legate de dimensiunea ferestrei de vizualizare a browserului:

Exemple de utilizare:

Marimea 2 vw

Dimensiunea 2vh

Mărimea 2 vmin

Dimensiunea 2 vmax

funcția calc().

Folosit pentru a specifica o valoare calculată Proprietăți CSS, care folosesc un număr ca valoare. În primul rând, calc poate fi folosit pentru a calcula dimensiunile, unghiurile și timpul. În plus, funcția vă permite să amestecați diferite unități de măsură, de exemplu, lățimea unui div poate fi setată astfel:

div(
lățime: calc (100% - 40px);
}

În acest caz, lățimea div-ului va fi egală cu lățimea elementului părinte minus 40 de pixeli.

Puteți utiliza următoarele operații aritmetice în expresii:

• + - adaos. Caracterul este separat prin spații pe ambele părți (înălțime: calc (20% + 50px));
• — — scădere. Caracterul este separat prin spații pe ambele părți (lățime: calc (90% - 10px););
• * — înmulțire (padding: calc (2em*2););
• / - împărțire. Împărțirea la zero este interzisă (lățimea: calc (100%/4);).

ÎN Browsere Firefox până la versiunea 16.0 este acceptată funcția -moz-calc, în Chrome până la versiunea 26.0 și în Safari din versiunea 6.0 -webkit-calc este acceptată.

De exemplu, într-un aspect flexibil al site-ului web cu două coloane, trebuie să ne asigurăm că există o distanță de 50px între coloane la orice dimensiune a ferestrei browserului. Apoi cu ajutorul funcții calc aceasta se face după cum urmează:

Unitățile CSS joacă un rol important în crearea site-urilor web și setarea 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. Ele reprezintă o reprezentare digitală a 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 tipărire, 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 rezoluție foarte mare, un pixel în CSS este egal cu mai mulți pixeli de pe ecran, astfel încât numărul de px per inch este în jur de 96. Pixelul este cea mai mică unitate de măsură și este folosit în mod obișnuit ca ghid pentru alții.

Unități de lungime relativă în CSS

Unitățile de lungime relativă în CSS nu au valori fixe. Semnificațiile lor depind de altele valorile stabilite sau funcții. Ele sunt mai populare în design 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 literă mică x font instalat. Când modificați valoarea proprietății font-family, 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), numai 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 din browser 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 sunt 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 mare, 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.

×