Am menționat noi (relativ) unități de măsură. Aceste unități sunt vw, vh, vmin și vmax și se bazează pe dimensiunea ferestrei de vizualizare a browserului. Dimensiunea lor reală se modifică pe măsură ce se modifică fereastra de vizualizare a browserului, făcând aceste unități ideale pentru design responsive. Deși în postarea mea anterioară am argumentat împotriva utilizării acestor unități pentru a specifica dimensiunile fonturilor, ele pot fi foarte utile pentru lucrul cu elemente de aspect.

Unități de vizualizare

Unitățile de vizualizare sunt unități relative, ceea ce înseamnă că nu pot fi măsurate obiectiv. Dimensiunea lor este determinată de dimensiunea ferestrei de vizualizare a browserului. Există patru unități legate de fereastra de vizualizare.

Mă voi concentra pe primele două, deoarece sunt cele mai frecvent utilizate. În multe cazuri, unitățile de vizualizare (vh și vw) se suprapun cu procente în ceea ce privește capabilitățile. Cu toate acestea, fiecare dintre ele are propriile sale puncte forte și puncte slabe.

Pentru a rezuma, arată astfel:

Când aveți de-a face cu lățimea, % este mai bun, iar când aveți de-a face cu înălțimea, vh este mai bun.

Elemente de lățime completă a paginii: % > vw

După cum am spus deja, vw determină dimensiunea elementului în funcție de lățimea ferestrei de vizualizare. Cu toate acestea, browserele calculează dimensiunea pe baza spațiului pentru bara de defilare.

Dacă lățimea paginii depășește lățimea ferestrei de vizualizare, apare o bară de defilare. Cu toate acestea, în realitate, lățimea ferestrei de vizualizare este mai mare decât lățimea elementului html

Viewport > html > body

Deci, dacă setați lățimea elementului la 100vw, elementul se va extinde dincolo de html și body. În acest exemplu, am făcut un chenar roșu în jurul elementului html și am umplut secțiunile cu diferite culori.

Din cauza acestei nuanțe, este mai bine să faceți elemente pe întreaga lățime a paginii folosind procente, decât să vă bazați pe lățimea ferestrei de vizualizare.

Elemente pentru înălțimea întregii pagini: vh > %

Când creați elemente care trebuie să aibă aceeași înălțime ca și pagina, este mult mai bine să folosiți vh în loc de procente. Deoarece dimensiunea unui element, definită ca procent, este relativă la elementul său părinte, putem obține un element cu o înălțime egală cu înălțimea ecranului doar dacă elementul său părinte ocupă și întreaga înălțime a ecranului. Aceasta înseamnă că trebuie să poziționăm elementul ca fiind fix pentru a face elementul html părinte sau să recurgem la utilizarea unui hack.

Utilizarea vh pentru a obține acest efect este destul de simplă:

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

Indiferent de cum este imbricat elementul .example, dimensiunile acestuia pot fi setate în raport cu dimensiunile ferestrei de vizualizare. Problema derulării nu ne va deranja deoarece majoritatea site-urilor nu au o bară de defilare orizontală

Iată câteva exemple despre cum pot fi utilizate unitățile vh.

Imagini de fundal pe ecran complet

O utilizare tipică a unității vh este crearea unei imagini de fundal care se întinde pe întreaga înălțime și lățime a ecranului, indiferent de dimensiunea dispozitivului. Acest lucru este destul de ușor de făcut.

Bg ( poziție: relativă; fundal: url("bg.jpg") centru/copertă; lățime: 100%; înălțime: 100vh; )

Într-un mod similar, putem crea un efect de „pagini” dând fiecărei secțiuni dimensiunile ferestrei de vizualizare.

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

Putem folosi JavaScript pentru a crea iluzia de întoarcere a paginii.

$("nav").on("click", function() ( if ($(this).hasClass("jos")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animate(( scrollTop: movePos ), 1000 ))

Imagine pliabilă

Vh poate fi folosit și pentru a controla dimensiunea unei imagini dintr-o pagină. De exemplu, în cadrul unui articol. Vrem să ne asigurăm că orice imagine va fi afișată în întregime, indiferent de dimensiunea ecranului.

Vom avea nevoie de următorul cod

Img ( width: auto; /* Lățimea automată să fie proporțională cu înălțimea */ max-width: 100%; /* Nu mai mult decât lățimea elementului părinte */ max-height: 90vh; /* Nu mai mult decât înălțimea a ferestrei de vizualizare */ margine: 2rem auto )

Suport pentru browser

Deoarece aceste unități sunt relativ noi, există încă probleme cu anumite browsere.

Iată cum să le rezolvi.

Unitățile CSS joacă un rol important în crearea site-urilor web și setarea dimensiunilor diferitelor elemente. Valorile CSS pot fi exprimate ca numere pozitive sau negative, deși unele proprietăți acceptă doar numere pozitive. Valoarea numerică este însoțită de o abreviere de 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 pe ecrane diferite. 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);
• in inchi);
• pc(vârfuri);
• pt(puncte);
• px (pixeli).

Cele mai multe unități de lungime absolută 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ă din CSS nu au valori fixe. Valorile lor depind de alte valori sau funcții specificate. 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 specifice fontului se referă la o dimensiune prestabilită a fontului sau la valoarea proprietății 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 a fontului 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 în 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 dimensiunile 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 minimă dintre î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 .

Interes %

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 elementului copil va fi de 500 px.

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 o valoare mutabilă 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 elementului părinte și se modifică odată cu acesta, iar rem este legat de elementul 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 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

Notă

Când setați dimensiuni, asigurați-vă că specificați unitățile de măsură, de exemplu lățimea: 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 atunci când valoarea este zero (marja: 0).

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

Specificație

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.

×

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 o valoare mutabilă 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 elementului părinte și se modifică odată cu acesta, iar rem este legat de elementul 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 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

Notă

Când setați dimensiuni, asigurați-vă că specificați unitățile de măsură, de exemplu lățimea: 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 atunci când valoarea este zero (marja: 0).

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

Specificație

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.

×

Unul dintre cele mai confuze aspecte CSS este aplicația marimea fontului atribut pentru scalarea textului. Folosind CSS, puteți redimensiona textul din browser folosind patru unități de măsură diferite. Care dintre aceste patru unități este cea mai bună pentru web? Aceasta este o întrebare care a dat naștere la diverse discuții și critici. Găsirea unui răspuns definitiv este dificilă, deoarece întrebarea în sine este complexă.

Faceți cunoștință cu unitățile

1. „Ems” (em): „em” este o unitate scalabilă care este utilizată în documentele web. „em” este egal cu dimensiunea fontului curent, de exemplu, dacă dimensiunea fontului din document este 12pt, 1em este egal cu 12pt. „em” este scalabil prin natură, deci 2em va fi egal cu 24pt, 0.5em va fi egal cu 6pt etc. Utilizarea lui „em” devine din ce în ce mai populară în documentele web datorită scalabilității și capacității sale de a fi util pe dispozitivele mobile.
2. Pixeli (px): „px” sunt unități de dimensiuni fixe care sunt utilizate pe ecrane (cum ar fi pentru citirea pe ecranul unui computer). Un pixel este egal cu un punct de pe ecranul computerului (cel mai mic element al rezoluției ecranului). Mulți designeri web folosesc px în documentele web pentru a obține o reprezentare perfectă a pixelilor site-ului lor atunci când este afișat într-un browser. Una dintre problemele cu utilizarea px este că aceste unități nu permit scalarea pentru cititoarele cu deficiențe de vedere sau dispozitivele mobile.
3. Puncte (pt): „pt”, folosit în mod tradițional în mediile tipărite (tot ce trebuie tipărit pe hârtie etc.). Un „pt” este egal cu 1/72 de inch. „pt”, ca „px”, au o dimensiune fixă ​​a unității și nu poate fi scalat.
4. Procente (%): unitățile procentuale sunt similare cu „em”, cu excepția câtorva diferențe cheie. În primul rând, dimensiunea actuală a fontului este de 100% (adică 12 pt = 100%). Prin utilizarea „%”, textul dvs. devine complet scalabil pentru dispozitive mobile și ușurință în utilizare (accesibilitate).

Deci, care este diferența?

Va fi ușor de înțeles diferența dintre unitățile de dimensiune a fontului odată ce le veți vedea în acțiune. De obicei, 1em = 12pt = 16px = 100%. Folosind aceste dimensiuni de font, să ne uităm la ce se întâmplă atunci când măriți dimensiunea de bază a fontului (folosind selectorul de corp CSS) de la 100% la 120%.

Modificarea dimensiunii fontului de la 100% la 120%.

După cum puteți vedea, „em” și „%” au crescut dimensiunea fontului, în timp ce „px” și „pt” nu. Setarea unei dimensiuni absolute pentru textul dvs. poate fi ușoară, dar este mult mai bine pentru vizitatori să folosească text scalabil care poate fi afișat pe orice dispozitiv sau mașină. Din acest motiv, unitățile „em” și „%” sunt de preferat să fie folosite pentru textul unui document web.

„em” vs „%”

Am aflat că unitățile „px” și „pt” nu sunt cele mai potrivite pentru documentele web, ceea ce ne obligă să folosim „em” și „%”. În teorie, unitățile „em” și „%” sunt identice, dar în practică au diferențe minore care sunt importante de luat în considerare.

În exemplul de mai sus, am folosit procente (în eticheta body) ca unitate de bază pentru dimensiunea fontului. Dacă schimbați unitatea de bază pentru dimensiunea fontului de la „%” la „em” (adică corpul (dimensiunea fontului: 1em;)), dvs., ar trebui să nu observa diferenta. Să vedem ce se întâmplă atunci când „1em” este unitatea noastră de bază și când clientul modifică „Dimensiunea fontului” în setările browserului lor (multe browsere, cum ar fi Internet Explorer, au această opțiune).

Dimensiunea fontului când clientul modifică dimensiunea textului în browser.

Când dimensiunea textului este setată la „medie” în browserul clientului, nu există nicio diferență notabilă între „em” și „%”. Cu toate acestea, dacă parametrul este modificat, diferența devine foarte mare. Când este setat la „Mai mic”, „em” este mult mai mic decât „%”, iar când este setat la „Mai mare”, dimpotrivă, „em” este afișat mult mai mare decât „%”. Și, în timp ce mulți susțin că unitățile din „em” se scalează așa cum se intenționează, în practică textul din „em” se scalează prea dramatic, ceea ce face ca textul cel mai mic să devină ilizibil pe unele mașini.

Verdict

În teorie, unitățile „em” sunt noul și viitorul standard de dimensiune a fontului pe web, dar, în practică, unitățile „%” permit textului să fie afișat mai consecvent și mai convenabil pentru utilizatori. La modificarea parametrilor clientului, textul în „%” s-a modificat în proporții rezonabile, ceea ce le permite designerilor să mențină lizibilitatea, accesibilitatea și designul.

Câştigător: procente (%).