Unități de vizualizare vs procente. Unități de vizualizare CSS: pornire rapidă

A

< div class = "fullscreen a" > < p >A< p > < / div >

CSS-ul de mai jos va extinde secțiunea imaginii de fundal la lățime completă:

Ecran complet ( lățime: 100 %; înălțime: 100 vh; umplutură: 40 vh; ) .a ( fundal: url("cale/spre/imagine.jpg") centru/copertă; )

Ecran complet ( latime: 100%; inaltime: 100vh; umplutura: 40vh; fundal: url ("cale/spre/imagine.jpg") centru/copertă;

Titluri ideale

Poate că ați auzit sau chiar folosit plugin jQuery FitText. Folosind acest plugin, puteți scala anteturile astfel încât să ocupe întreaga lățime a elementului părinte. După cum am spus mai devreme, valoarea unităților de vizualizare depinde direct de dimensiunea ferestrei de vizualizare. Adică, dacă specificați dimensiunea fontului titlurilor în unitățile de vizualizare, atunci acestea se vor potrivi ideal pentru fiecare ecran. Dacă lățimea ferestrei de vizualizare se modifică, browserul va schimba automat titlul. Trebuie doar să-l determinați pe cel potrivit sens original pentru dimensiunea fontului.

problema principala cu dimensiunea fontului și unitățile de vizualizare este că dimensiunea textului va varia foarte mult în funcție de portul de vizualizare. De exemplu, o dimensiune a fontului de 8vw va face antetul 96px pentru o lățime a ferestrei de vizualizare de 1200px, 33px pentru o lățime a ferestrei de vizualizare de 400px și 154px pentru o lățime a ferestrei de vizualizare de 1920px. Fontul poate fi prea mare sau prea mic pentru lectura usoara. Citiți mai multe despre instalare corectă dimensiunile textului folosind unităţi de măsură şi funcții calc() poate fi găsit într-un articol minunat despre tipografie în unități de vizualizare.

Centrare ușoară a elementelor

Unitățile de vizualizare pot fi foarte utile atunci când trebuie să plasați un element exact în centrul ecranului utilizatorului. Dacă înălțimea elementului este cunoscută, atunci trebuie doar să setați valorile superioare și inferioare proprietățile marjeiîn [(100 - înălțime)/2]vh.

Centrat ( latime: 60vw; inaltime: 70vh; marja: 15vh auto;

Ce să-ți amintești

Dacă decideți să utilizați un viewport unitar în proiectele dvs., există câteva lucruri pe care trebuie să le aveți în vedere.

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: fixată 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 de măsură 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. Momentan sunt doar suportati Internet Explorer 9.

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 este mai mare decât lățimea ferestrei de vizualizare (se adaugă lățimea barei de defilare), 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
Crom: 26.0
Operă: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Crom 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 bună decizie 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 100% lățime, care va fi egală cu lățimea element rădăcină html.

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

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 de ales 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 acea dimensiune a fontului.

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 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 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, procentul 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 este 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, 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 sunt, de asemenea, asociate cu familia de fonturi, 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”. Înălțimea x a unui font dat este înălțimea x a literelor mici ale acelui 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. Puteți reseta elementul de jos în același mod. 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+!

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 numericaî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 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 absolute de lungime sunt inutile pe Internet. Singura excepție este px. Pixelii sunt unități relativeîn raport cu rezoluția ecranului. Pentru imprimante și monitoare cu foarte Rezoluție înaltă un pixel în CSS este egal cu mai mulți pixeli de pe ecran, deci 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ăț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 specifice fontului sunt menționate în avans setat dimensiunea font sau valoarea proprietății font-family:

• 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 litera mica 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 î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 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 .

Interes %

Distanța specificată ca procent depinde de lungimea elementului părinte. De exemplu, dacă element părinte lățimea este 1000px și elementul său copil este 50% din această valoare, apoi lățimea elementului 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.