Przewodnik po jednostkach rzutni CSS vw, vh, vmin, vmax

Długości procentowe rzutni, lub jednostki rzutni ponieważ są one częściej wymieniane, są odpowiedzialnymi jednostkami CSS, które umożliwiają definiowanie wymiarów jako procent szerokości lub długości rzutni. Jednostki rzutni mogą być całkiem użyteczne w przypadkach, gdy inne reagujące jednostki CSS, takie jak procenty, są ciężko pracować.

Mimo że Dokumentacja W3C w jednostkach rzutni zawiera wszystko, co można umieścić w teorii, nie jest zbyt gadatliwy. W tym artykule przyjrzymy się, jak te jednostki CSS pracować w praktyce.

Wysokość rzutni (vh) i szerokość rzutni (vw)

W3C definiuje rzutnię tak jak “rozmiar początkowego bloku zawierającego”. Innymi słowy, rzutnia to obszar zawarte w oknie przeglądarki lub dowolny inny obszar wyświetlania na ekranie.

The vw i vh jednostki oznacza procent szerokości i wysokości rzeczywistej rzutni. Mogą przyjąć wartość od 0 do 100 zgodnie z następującymi zasadami:

 100vw = 100% szerokości rzutni 1vw = 1% szerokości rzutni 100vh = 100% wysokości rzutni 1vh = 1% wysokości rzutni 

Różnice w jednostkach procentowych

Jak więc jednostki rzutni różnią się od jednostek procentowych? Jednostki procentowe odziedziczyć rozmiar ich elementu macierzystego podczas gdy jednostki rzutni nie. Jednostki rzutni są zawsze obliczane jako procent rozmiaru rzutni. W rezultacie element zdefiniowany przez jednostki rzutni może przekraczać rozmiar swojego rodzica.

Przykład: sekcje pełnoekranowe

Sekcje pełnoekranowe są prawdopodobnie najbardziej znanymi przypadkami użycia jednostek rzutni.

The HTML jest dość prosty; po prostu mamy trzy sekcje pod sobą i chcemy, aby każdy z nich zakryć cały ekran (ale nie więcej).

W CSS używamy 100vh jak wysokość wartość i 100% tak jak szerokość. Nie używamy vw domyślnie tutaj, dodawane są również paski przewijania do rozmiaru rzutni. Więc jeśli użyliśmy szerokość: 100vw; zasada a poziomy pasek przewijania pojawi się na u dołu okna przeglądarki.

 * margin: 0; dopełnienie: 0;  sekcja background-size: cover; pozycja tła: środek; szerokość: 100%; wysokość: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Na poniższym demo gif możesz to zobaczyć vh jest naprawdę responsywna jednostka.

Zgodnie z dokumentami W3C wspomniane wyżej poziomy pasek przewijania można rozwiązać, dodając przepełnienie: auto; reguła do elementu głównego. To rozwiązanie działa tylko częściowo, chociaż. Poziomy pasek przewijania rzeczywiście znika, ale szerokość jest nadal obliczany na podstawie szerokości rzutni (w zestawie pasek boczny), więc elementy będą nieco większe niż powinny.

Powiedziałbym, że nie odważyłbym się użyć vw jednostka włączona wymiarowanie elementów pełnoekranowych z tego powodu. Nawet tego nie potrzebujemy, jak szerokość: 100%; zasada działa doskonale. W przypadku układów pełnoekranowych prawdziwym wyzwaniem zawsze było to, jak ustaw odpowiednią wartość wysokości i vh jednostka daje wspaniałe rozwiązanie.

Inne przypadki użycia

Jeśli jesteś zainteresowany inne przypadki użycia vw i vh Lullabot ma świetny artykuł, który wymienia garść przykładów z życia (z demami Codepen), takimi jak:

• Karty o stałym współczynniku.
• Utrzymywanie elementu krótszego niż ekran.
• Skalowanie tekstu.
• Wyłamanie pojemnika.

Opera.dev ma również krótki poradnik na temat tego, jak możesz wykorzystać dźwignię vw jednostka w tworzenie responsywnej typografii.

Nie można używać tylko jednostek rzutni na szerokość i wysokość właściwości, ale na innych. Na przykład możesz ustaw rozmiar paddings i marginesów używając vw i vh jednostki też.

Rzutnia min (vmin) i maks. rzutnia (vmax)

The vmin i vmax jednostki umożliwiają dostęp do rozmiar mniejszej lub większej strony rzutni, zgodnie z następującymi zasadami:

 100vmin = 100vw lub 100vh, cokolwiek jest mniejsze 1vmin = 1vw lub 1vh, cokolwiek jest mniejsze 100vmax = 100vw lub 100vh, cokolwiek jest większe 1vmax = 1vw lub 1vh, cokolwiek jest większe 

Tak więc w przypadku orientacja pionowa, 100vmin jest równe 100vw, jak rzutnia mniejszy poziomo niż pionowo. Z tego samego powodu, 100vmax będzie równy 100vh.

Podobnie w przypadku a orientacja krajobrazu, 100vmin jest równe 100vh, jak rzutnia mniejszy pionowo niż poziomo. I oczywiście, 100vmax będzie równy 100vw tutaj.

Przykład: spraw, aby teksty bohaterów były czytelne na każdym ekranie

The vmin i vmax jednostki są znacznie mniej znane niż vw i vh. Można je jednak doskonale wykorzystać jako zastąpić orientację @głoska bezdźwięczna zapytania. Na przykład, vmin i vmax może się przydać, gdy masz elementy, które mogą wyglądać dziwnie przy różnych proporcjach.

Nowy kod ma świetny poradnik, w którym omawiają, jak możesz zachowaj czytelny tekst bohatera na każdym ekranie, używając vmin jednostka. Teksty bohaterów są podatne na wygląd za mały na komórce i za duży na dużych monitorach.

Oto główna idea ich rozwiązania:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; waga czcionki: 900; wyrównywanie tekstu: środek;  

W wersji demonstracyjnej Codepen możesz sprawdzić, jak to zrobić vmin rozwiązuje problem czytelności tekstów bohaterów. Uzyskać dostęp do “Pełna strona” widok na Codepen zmień rozmiar okna przeglądarki zarówno poziomo, jak i pionowo, aby zobaczyć, jak zmienia się tekst bohatera.

Obsługa przeglądarki

Jak widać na poniższym wykresie CanIUse, obsługa przeglądarki jest stosunkowo dobra dla jednostek rzutni. Należy jednak pamiętać, że niektóre wersje IE i Edge nie obsługują vmax. Ponadto, iOS 6 i 7 mają problem z vh jednostka, który został naprawiony w iOS 8.