Dynamic viewport units – zmiana jednostek

Wstęp

Tradycyjnie, jednostki takie jak piksele (px) najczęściej używamy do określania rozmiarów elementów na stronach internetowych. Jednakże, wraz z rozwojem technologii mobilnych i różnorodnością urządzeń, stało się konieczne opracowanie bardziej elastycznych i responsywnych metod projektowania stron. W tym celu stworzono dynamic viewport units i właśnie jest ten moment, kiedy można powoli zaczynać je stosować.

Co to jest dynamic viewport units?

Dynamiczne jednostki widoku (vw, vh, vmin i vmax) pozwalają na określanie rozmiarów elementów w odniesieniu do rozmiarów widoku przeglądarki. Jednostka vw reprezentuje 1% szerokości widoku, vh reprezentuje 1% wysokości widoku, vmin to mniejsza wartość spośród vw i vh, a vmax to większa wartość spośród vw i vh. Na przykład, 50vw oznacza połowę szerokości viewportu, podczas gdy 25vh oznacza jedną czwartą wysokośc. Zapewniają one możliwość dostosowania rozmiarów elementów do aktualnego rozmiaru widoku przeglądarki, co pozwoli nam na lepsze dostosowanie zawartości do różnych urządzeń i ekranów.

Zalety dynamic viewport units

Główną zaletą dynamicznych jednostek widoku jest to, że pozwalają one na elastyczne projektowanie stron internetowych, które dostosowują się do różnych urządzeń i rozmiarów ekranów. Można je wykorzystać do ustalania szerokości, wysokości, marginesów, wypełnień i innych parametrów elementów na stronie. Na przykład, możemy zastosować 50vw jako szerokość obrazka, co sprawi, że będzie on zawsze zajmować połowę szerokości widoku. Niezależnie od tego, czy jest wyświetlany na dużym ekranie komputera, czy na małym ekranie telefonu.

Dynamiczne jednostki widoku są szczególnie przydatne w projektowaniu responsywnych stron internetowych, które automatycznie dostosowują się do różnych rozmiarów ekranów. Przy użyciu tych jednostek, strony mogą być tworzone w sposób, który umożliwia płynne dostosowanie rozmiarów i układu elementów w zależności od dostępnego miejsca na ekranie.

Jednak, podobnie jak w przypadku innych jednostek, istnieje kilka czynników, które należy wziąć pod uwagę podczas korzystania z dynamicznych jednostek widoku. Na przykład, jeśli stosuje się bardzo duże wartości vw lub vh, elementy mogą stać się zbyt duże lub zbyt małe na niektórych ekranach.

Przykład

#output {
  background-color: #ff0000;
  display: block;
  margin: 1em 0;
  height: 33%;
}

@supports(height: 100dvh) {
  #output {
    height: 33dvh;
  }
}

Wsparcie przeglądarek

Podsumowanie

Dynamiczne jednostki widoku są potężnym narzędziem w projektowaniu responsywnych stron internetowych. Pozwalają na elastyczne dostosowanie rozmiarów i układu elementów w zależności od rozmiaru widoku przeglądarki. Jednak warto zachować ostrożność i testować stronę na różnych urządzeniach, aby upewnić się, że jest ona poprawnie wyświetlana na wszystkich platformach.