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 pentru noi soluții. Ș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ă poată 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 am dori 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 acea dimensiune a fontului.

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 dimensiunea fontului 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 din spatele 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. in orice caz Procent CSS- nu intotdeauna Cea mai bună decizie pentru fiecare problema. Lățimea CSS este relativă la 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 este de 1/100 din î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, un mod foarte simplu 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 curent și marimea fontului. 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. In timp ce utilizare normală Această regulă particulară constă în aranjarea 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-inaltime 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 șir 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+!

Am menționat noi unități de măsură (relativ). 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 adaptiv. Deși în mine postarea 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ăți de vizualizare(vh și vw) se intersectează cu procentele din punct de vedere al capacităților. 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. V î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 procentuală a unui element este relativă la elementul său părinte, putem obține înălțimea elementului înălțime egală ecran numai dacă elementul său părinte ocupă și întreaga înălțime a ecranului. Aceasta înseamnă că trebuie să poziționăm elementul ca fix pentru a face element html părinte, sau recurge la utilizarea unui fel de 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 derulare 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 toată înălțimea și lățimea 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 ( lățime: automat; /* Lățimea automată trebuie să fie proporțională cu înălțimea */ lățime maximă: 100%; /* Nu mai multa latime element parent */ max-height: 90vh; /* Fără a depăși înălțimea ferestrei de vizualizare */ margin: 2rem auto; )

Suport pentru browser

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

Iată cum să le rezolvi.

Pentru a seta dimensiuni diverse elemente CSS utilizează unități de măsură absolute și relative. 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 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 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 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 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

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.

De la autor: Au trecut câțiva ani de la prima apariție a unităților de vizualizare în CSS. Acestea sunt unități de lungime cu adevărat adaptive; valoarea lor se modifică pentru a se potrivi cu dimensiunea ferestrei browserului. Dacă ai auzit despre ele, dar nu te-ai uitat niciodată în detalii, acest articol este pentru tine.

Unitățile de măsură și semnificația lor

Există 4 tipuri de unități de vizualizare în CSS: vh, vw, vmin și vmax.

Înălțimea ferestrei (vh) – pe baza înălțimii ferestrei. Valoarea 1vh este egală cu 1% din înălțimea ferestrei de vizualizare.

Lățimea ferestrei (vw) – pe baza lățimii ferestrei. Valoarea 1vw este egală cu 1% din lățimea ferestrei de vizualizare.

Viewport minimum (vmin) – bazat pe partea minimă a viewportului. Dacă înălțimea ferestrei de vizualizare este mai mică decât lățimea, valoarea lui 1vmin va fi egală cu 1% din înălțime. De asemenea, dacă lățimea este mai mică decât înălțimea, atunci 1vmin va fi egal cu 1% din lățimea ferestrei de vizualizare.

Vizualizare maximă (vmax) – în funcție de partea mare a ferestrei de vizualizare. Dacă înălțimea ferestrei este mai mare decât lățimea, atunci valoarea 1vmax va fi egală cu 1% din înălțimea ferestrei. Dacă lățimea ferestrei de vizualizare este mai mare decât înălțimea, atunci 1vmax va fi egal cu 1% din lățime.

Să vedem în ce valori intrăm situatii diferite:

Dacă fereastra de vizualizare are 1200px lățime și 1000px înălțime, atunci valoarea lui 10vw va fi 120px, iar 10vh va fi 100px. Lățimea ferestrei de vizualizare este mai mare decât înălțimea, deci 10vmax va fi egal cu 120px, iar 10vmin va fi 100px.

Dacă rotiți dispozitivul astfel încât lățimea să devină 1000px și înălțimea 1200px, atunci 10vh devine 120px și 10vw devine 100px. Interesant este că 10vmax va rămâne 120px, deoarece acum valoarea este determinată de înălțimea ferestrei de vizualizare. Valoarea 10vmin va rămâne, de asemenea, 100px.

Dacă micșorați fereastra browserului la 1000px lățime și 800px înălțime, atunci 10vh ar fi 80px și 10vw ar fi 100px. La fel, 10vmax va deveni 100px, iar 10vmin va deveni 80px.

Pe acest moment este posibil ca unitățile de vizualizare să nu difere mult de procente pentru dvs., dar diferența este mare. În cazul procentelor, lățimea și înălțimea elementelor copil depind de bloc părinte. Exemplu:

În demo puteți vedea cum lățimea primului element copil ocupă 80% din lățimea părintelui. Al doilea copil are o lățime de 80vw, ceea ce îl face mai lat decât părintele său.

Aplicarea unităților de vizualizare

Aceste unități se bazează pe dimensiunile ferestrei de vizualizare, deci sunt foarte utile în situațiile în care lățimea, înălțimea sau dimensiunile elementelor trebuie să se modifice în funcție de dimensiunile ferestrei.

Imagini de fundal pe ecran complet și secțiuni

Pe Internet, puteți găsi adesea imagini de fundal pe elemente care ocupă întregul ecran. Același lucru se poate face și în designul site-ului web, astfel încât o secțiune separată despre un produs sau serviciu să ocupe întregul ecran. În astfel de cazuri, puteți seta lățimea elementelor la 100% și înălțimea la 100vh.

Să ne uităm la următorul Exemplu HTML: