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 în mod 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 și funcția calc() pot fi găsite î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 marginiiî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 o fereastră de vizualizare unitară în proiectele dvs., există câteva lucruri de care trebuie să aveți în vedere.

Unități Dimensiuni CSS joacă un rol important în crearea site-urilor web și în stabilirea dimensiunilor diverse elemente. Valorile CSS pot fi exprimate ca numere pozitive sau 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 design web. Ele reprezintă o denumire digitală a rezultatelor măsurătorilor în lume fizicăși nu depind 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 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 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ă din 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 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 măsurătorile depind 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.

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 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ățile de vizualizare (vh și vw) se suprapun cu procente 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ă creaț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 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 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 ( 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.

Pentru a seta dimensiunile diferitelor elemente în CSS, absolut și unități relative măsurători. 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 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 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.

×

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 browser 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 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 dimensiuni procentuale sunt calculate în raport cu valorile elementelor părinte, atunci trebuie să setați valorile corespunzătoare 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 derulării diapozitivelor când faceți clic pe săgeată este implementat folosind un mic script 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ă.