Image for Jednostki viewport – na czym polegają?

Jednostki viewport – na czym polegają?

Czas czytania:

Stylowanie i pozycjonowanie elementów strony www z uwzględnieniem różnych rozdzielczości ekranów może wydawać się skomplikowane. Problemem jest nie tylko wymiarowanie elementów na mobilnych i dużych ekranach, ale i zachowanie proporcjonalności elementów względem siebie np. odstępów i marginesów czy grafik/ikon względem tekstów. Prawidłowo zaprojektowana strona www to taka, która będzie płynnie zmieniała rozmiary elementów wraz ze zmieniającymi się rozdzielczościami ekranów. Dodatkowo powinna uwzględniać granicę, do jakiej element może się zmniejszyć lub zwiększyć.

Obszar viewport

Viewport to tzw. obszar renderowania treści w wirtualnym oknie przeglądarki wyświetlanym na ekranie. Mówiąc najprościej, to obszar przeglądarki, w którym widzimy stronę www.

Optymalizacja strony pod urządzenia mobilne to obecnie kluczowy proces dla Front-End Developerów. Podstawą dla uzyskania responsywności jest umieszczenie meta tagu viewport (w sekcji head dokumentu HTML), który daje przeglądarce informacje, w jaki sposób strona ma być wyświetlana na urządzeniach mobilnych.

<meta name="viewport" content="width=device-width, initial-scale=1">
Znacznik ten pozwala ustawić opcje skalowania strony, w tym także domyślne przybliżenie (zoom). Podana wartość 1 dla initial-scale wyświetla ją bez skalowania. Dla dyrektywy width ustawiona wartość device-width powoduje, że szerokość obszaru wyświetlania jest równa szerokości ekranu urządzenia, a więc witryna jest rozciągnięta w 100%. Aby określić szerokość i wysokość wyświetlanego obszaru strony (np. dla modali), możemy podać dla width i height wartość liczbową w pikselach.

Jednostki CSS

Każdy element renderowany na stronie internetowej możemy zdefiniować pod względem wyglądu i położenia poprzez właściwości opisane w CSS.

Poniżej zostały przedstawione najpopularniejsze jednostki CSS i różnice w sposobie ich obliczania przez przeglądarkę internetową:

  • em – jednostka względna, obliczana na podstawie rozmiaru czcionki bezpośredniego rodzica danego elementu;
  • rem – jednostka względna, obliczana na podstawie rozmiaru czcionki głównego dokumentu HTML (najwyższego elementu w DOM strony), taką właściwość najczęściej ustawiamy za pomocą:
:root {
  font-size: 10px;
}
lub
html {
  font-size: 10px;
}
  • % – jednostka względna, obliczana w procentach w zależności od rozmiaru elementu rodzica;
  • px – jednostka bezwzględna, dla urządzeń o niskich dpi 1px odpowiada jednemu pikselowi, dla drukarek i wysokiej rozdzielczości ekranów urządzeń 1px zawiera w sobie wiele pikseli. Jednostka ta jest absolutna, tzn. nie jest relatywna względem innych jednostek.

Wymienione jednostki mogą okazać się niewystarczające, aby strona była poprawnie wyświetlania na urządzeniach o różnych rozdzielczościach. W tym celu zwykle stosuje się osobne definicje stylów w Media Queries. Inną metodą jest zastosowanie do tego specjalnych jednostek viewport, które zapewniają dostosowywanie się wymiarów elementów do okna przeglądarki internetowej.

Jednostki viewport CSS

Aby uzyskać dynamicznie zmieniające się rozmiary elementów na stronie względem okna przeglądarki, należy ustawić im rozmiar za pomocą jednostek tzw. Viewport Units, które reprezentują procent aktualnych wymiarów obszaru roboczego ekranu:

  • vw – (viewport width) procentowa szerokość – względem szerokości okna przeglądarki;
  • vh – (viewport height) procentowa wysokość – względem wysokości okna przeglądarki;
  • vmin – (viewport minimum) mniejsza z wartości vw lub vh;
  • vmax – (viewport maximum) większa z wartości vw lub vh.

Viewport width i viewport height

To jednostki relatywne względem rozmiaru okna przeglądarki. Element o szerokości 1vw będzie zajmował 1% szerokości aktualnego obszaru roboczego ekranu, a 1vh będzie równy 1% wysokości.

Przykład

  • width: 50vw – element o wysokości połowy wysokości aktualnego okna przeglądarki
  • height: 50vh – element o wysokości połowy wysokości aktualnego okna przeglądarki
  • 1024px x 768px – aktualny rozmiar okna przeglądarki internetowej
  • 1024px × 0.01 × 50 = 512px – obliczona wartość szerokości elementu
  • 768px × 0.01 × 50 = 384px – obliczona wartość wysokości elementu

Viewport minimum i viewport maximum

Jednostki te są podobne do vw i vh, jednak ich wartość jest obliczana z aktualnie mniejszej lub większej wartości tj. wysokości lub szerokości okna przeglądarki.

Vmin w przypadku gdy wysokość okna przeglądarki jest mniejsza niż jej szerokość, obliczona zostanie na podstawie jej wysokości. Natomiast vmax dla tego samego przypadku odwoła się do większej z dwóch wartości czyli do szerokości.

Przykład

  • width: 50vmin – element o szerokości połowy z aktualnie większej wartości – wysokości lub szerokości
  • height: 50vmax – element o wysokości połowy z aktualnie mniejszej wartości – wysokości lub szerokości
  • 1024px x 768px – aktualny rozmiar okna przeglądarki internetowej
  • 768px × 0.01 × 50 = 384px – obliczona wartość vmin dla szerokości elementu
  • 1024px × 0.01 × 50 = 512px – obliczona wartość vmax dla wysokości elementu