CSS3 ma nowe jednostki miary. (Myślę, że już o tym mówiłem. pol) Słyszeliście już o px, pt, em i nowym rem. Przyjrzyjmy się jeszcze kilku: vw i vh.

Często w układzie znajdują się elementy, które na pewno zmieszczą się w oknie przeglądarki. Ogólnie rzecz biorąc, używany jest do tego JavaScript. Sprawdź rozmiar rzutni i odpowiednio zmień rozmiar elementów. Jeśli użytkownik zmieni rozmiar okna przeglądarki, procedura jest powtarzana.

Za pomocą vw/vh możemy ustawić rozmiar elementów w stosunku do rozmiaru rzutni. Jednostki vw/vh są interesujące, ponieważ 1vw jest jednostką równą 1/100 szerokości widocznego obszaru. Aby na przykład nadać elementowi szerokość równą szerokości widocznego obszaru, należy ustawić szerokość:100vw.

Jak można go używać

Lightboxy są świetnym kandydatem do vw i vh, ponieważ są zwykle pozycjonowane względem widoku, jednak uważam, że position:fixed with top , bottom , left i right są łatwiejsze w użyciu, ponieważ nie trzeba ustawiać wysokości i szerokości w ogóle.

Możesz użyć nowych jednostek do rozmiaru elementów, które są w normalnym przepływie. Na przykład mogę umieszczać zrzuty ekranu na stronie. Wysokość tych zrzutów ekranu nie powinna przekraczać wysokości rzutni. W tym celu mogę ustawić maksymalną wysokość obrazków:

Obraz (maksymalna wysokość: 95vh; )

W tym przypadku ustawiam wysokość na 95vh, aby zostawić trochę miejsca, gdy są na ekranie.

Obsługa przeglądarki

Jeśli rem jest obsługiwany przez prawie wszystkie główne przeglądarki, w tym IE9, warto wstrzymać się z używaniem vw i vh. Na ten moment tylko je wspiera Internet Explorer 9.

Wspomniałem o nowych (względnie) jednostkach miary. Jednostki te to vw, vh, vmin i vmax i są oparte na rozmiarze okna przeglądarki. Ich rzeczywisty rozmiar zmienia się wraz ze zmianą okna przeglądarki, dzięki czemu te jednostki są idealne do projektowania responsywnego. Chociaż w poprzednim poście sprzeciwiałem się używaniu tych jednostek do rozmiarów czcionek, mogą one być bardzo przydatne podczas pracy z elementami układu.

jednostki rzutni

Jednostki rzutni są jednostkami względnymi, co oznacza, że ​​nie można ich obiektywnie zmierzyć. Ich rozmiar zależy od rozmiaru rzutni w przeglądarce. Istnieją cztery jednostki związane z rzutnią.

Skoncentruję się na dwóch pierwszych, ponieważ są one najczęściej używane. W wielu przypadkach jednostki rzutni(vh i vw) pokrywają się z wartościami procentowymi pod względem możliwości. Jednak każdy z nich ma swoje mocne i słabe strony.

Podsumowując, dzieje się tak:

Kiedy mamy do czynienia z szerokością, % jest lepszy, a kiedy mamy do czynienia z wysokością, vh jest lepsze.

Elementy o pełnej szerokości: % > vw

Jak powiedziałem, vw określa rozmiar elementu na podstawie szerokości rzutni. Jednak przeglądarki obliczają rozmiar na podstawie miejsca na pasek przewijania.

Jeśli szerokość strony przekracza szerokość widocznego obszaru, pojawi się pasek przewijania. Jednak rzutnia jest w rzeczywistości szersza niż element html.

Viewport > html > body

Więc jeśli ustawisz szerokość elementu na 100vw, element wyjdzie poza html i treść. w tym przykładzie zrobiłem czerwoną ramkę wokół elementu html i wypełniłem sekcje różnymi kolorami.

Z powodu tego niuansu lepiej jest tworzyć elementy na całej szerokości strony, używając wartości procentowych, a nie polegać na szerokości widocznego obszaru.

Elementy o pełnej wysokości strony: vh > %

Tworząc elementy, których wysokość powinna być równa wysokości strony, zdecydowanie lepiej jest użyć vh zamiast procentów. Ponieważ procentowy rozmiar elementu jest zależny od jego rodzica, możemy uzyskać wysokość ekranu tylko wtedy, gdy jego rodzic również zajmuje całą wysokość ekranu. Oznacza to, że musimy ustawić element jako ustalony, aby to zrobić element html rodzica lub skorzystać z jakiegoś hacka.

Użycie vh do osiągnięcia tego efektu jest dość proste:

Przykład ( wysokość: 100vh; )

Niezależnie od tego, jak element .example jest zagnieżdżony, jego wymiary można ustawić względem wymiarów rzutni. Problem przewijania nie będzie nam przeszkadzał, ponieważ większość witryn nie ma poziomego paska przewijania.

Oto kilka przykładów wykorzystania jednostek vh.

Pełnoekranowe obrazy tła

Typowym zastosowaniem jednostki vh jest tworzenie zdjęcie w tle, który obejmuje całą wysokość i szerokość ekranu, niezależnie od rozmiaru urządzenia. Zrobienie tego jest dość łatwe.

Bg ( pozycja: względna; tło: url("bg.jpg") środek/okładka; szerokość: 100%; wysokość: 100vh; )

Podobnie możemy uzyskać efekt „stron”, nadając każdej sekcji rozmiar widocznego obszaru.

Sekcja (szerokość: 100%; wysokość: 100vh; )

Możemy użyć JavaScript, aby stworzyć iluzję przewracania stron.

$("nav").on("kliknij", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animacja(( scrollTop: movePos ), 1000; ))

Składany obraz

Vh może być również używany do kontrolowania rozmiaru obrazu na stronie. Na przykład w artykule. Chcemy mieć pewność, że każdy obraz będzie wyświetlany w całości, niezależnie od rozmiaru ekranu.

Potrzebujemy następującego kodu

Img ( width: auto; /* Auto-szerokość, aby zachować proporcjonalną wysokość */ max-width: 100%; /* Nie więcej niż szerokość elementu nadrzędnego */ max-height: 90vh; /* Nie więcej niż wysokość widocznego obszaru */ margines : 2rem auto;)

Obsługa przeglądarki

Ponieważ te jednostki miary są stosunkowo nowe, nadal występują problemy z niektórymi przeglądarkami.

Oto jak je rozwiązać.

: vw , vh i vmin . Ostatnio wspiera je również wersja deweloperska Chrome (numer 20), co daje nadzieję, że twórcy innych przeglądarek pójdą w ich ślady. W rzeczywistości byłoby to przydatne, ponieważ jest bardzo wygodne i praktyczne, a postaram się powiedzieć, dlaczego tak jest.

Dlaczego jest fajnie?

Wiele powodów. Oto dwa z nich:

1. Jest coś takiego jak długość linii tekstu, przy której czytanie jest wygodne. Nie chcę wzniecać holivarów, ale powiedzmy, że to 80 znaków. Tak więc te jednostki miary pozwalają utrzymać tę wartość na dowolnym rozmiarze ekranu.
2. Mogą również dostosować relację tytułu do treści, jak w jednym z postów Trenta Waltona.

Jak to działa?

Jednostką każdej z tych trzech wartości jest 1% rozmiaru ekranu. Na przykład, jeśli rozmiar ekranu ma szerokość 40 centymetrów, to 1vw jest równe 0,4 cm.

1vw= 1% szerokości okna
1vh= 1% wysokości okna
1 min= 1vw lub 1vh, w zależności od tego, co jest mniejsze

Stosowanie

Och, to bardzo proste:

h1 (rozmiar czcionki: 5.9vw; ) h2 (rozmiar czcionki: 3.0vh; ) p (rozmiar czcionki: 2vmin; )

Obsługa przeglądarki

Chrom 20+ I IE 10+
Testowałem w Opera Next (12), Safari 5.2 i Firefox Beta (13) - bezskutecznie.

Próbny

Krótki film pokazujący użycie vw:

Możesz spróbować sam (upewnij się, że Twoja przeglądarka obsługuje te jednostki miary)

Błędy

Jest wsparcie w Chrome 20, ale jest nieco krzywe. Po zmianie rozmiaru okna przeglądarki czcionka nie dopasowuje się do nowego rozmiaru okna. Specyfikacja mówi:

Jeśli zmieni się wysokość lub szerokość okna, odpowiednio się skalują.

Wysłałem zgłoszenie do bug trackera. Być może nie jest to duży problem, czcionka wciąż się zmienia przy „czystym” załadowaniu strony. Takie drobiazgi są interesujące tylko dla nas, maniaków designu, którzy takie rzeczy traktują ostrożnie, ale jednak.

Aby rozwiązać ten problem (zezwól na zmianę rozmiaru bez przeładowywania strony), musisz wywołać przerysowanie elementu. użyłem jQuery i po prostu eksperymentowałem z wartościami indeksu Z każdego elementu, który powoduje przerysowanie.

CauseRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() ( CauseRepaintsOn.css("z-index", 1; ));

Nie tylko rozmiar czcionki

Nawiasem mówiąc, to tylko kilka. Jak em , px , cokolwiek. Możesz ich używać wszędzie, nie chodzi tylko o rozmiar czcionki.

Stosowanie!

Zastosowanie natywne

Nie zapomnij zostawić wywołania zwrotnego dla przeglądarek, które jeszcze nie obsługują tych jednostek:

H1 (rozmiar czcionki: 36px; rozmiar czcionki: 5.4vw; )

Sprawdź wsparcie

Modernizr nie ma jeszcze testu do tego sprawdzenia, ale możesz to sprawdzić samodzielnie za pomocą małego skryptu JS.

VartestEl = $("#vw-test"); var rzutnia = $(okno); testEl.css(( szerokość: "100vw" )); if (testEl.width() == viewport.width()) ( $("html").addClass("vw-support"); ) else ( $("html").append("vw-unsupported") ; );

Symuluj funkcjonalność za pomocą FitText.js

Pomysł polega na tym, że wiąże całkowitą szerokość nagłówka z szerokością elementu nadrzędnego, co robi FitText.js. To prawda, że ​​robi to za pomocą JavaScript, matematyki, tagów span i wielu innych rzeczy. Teoretycznie możesz uruchomić test i użyć Modernizr.load do załadowania FitText.js, jeśli nie zostanie znalezione żadne wsparcie.

CSS3 ma nowe jednostki miary. (Myślę, że już o tym mówiłem. pol) Słyszeliście już o px, pt, em i nowym rem. Przyjrzyjmy się jeszcze kilku: vw i vh.

Często w układzie znajdują się elementy, które na pewno zmieszczą się w oknie przeglądarki. Ogólnie rzecz biorąc, używany jest do tego JavaScript. Sprawdź rozmiar rzutni i odpowiednio zmień rozmiar elementów. Jeśli użytkownik zmieni rozmiar okna przeglądarki, procedura jest powtarzana.

Za pomocą vw/vh możemy ustawić rozmiar elementów w stosunku do rozmiaru rzutni. Jednostki vw/vh są interesujące, ponieważ 1vw jest jednostką równą 1/100 szerokości widocznego obszaru. Aby na przykład nadać elementowi szerokość równą szerokości widocznego obszaru, należy ustawić szerokość:100vw.

Jak można go używać

Lightboxy są świetnym kandydatem do vw i vh, ponieważ są zwykle pozycjonowane względem widoku, jednak uważam, że position:fixed with top , bottom , left i right są łatwiejsze w użyciu, ponieważ nie trzeba ustawiać wysokości i szerokości w ogóle.

Możesz użyć nowych jednostek do rozmiaru elementów, które są w normalnym przepływie. Na przykład mogę umieszczać zrzuty ekranu na stronie. Wysokość tych zrzutów ekranu nie powinna przekraczać wysokości rzutni. W tym celu mogę ustawić maksymalną wysokość obrazków:

Obraz (maksymalna wysokość: 95vh; )

W tym przypadku ustawiam wysokość na 95vh, aby zostawić trochę miejsca, gdy są na ekranie.

Obsługa przeglądarki

Jeśli rem jest obsługiwany przez prawie wszystkie główne przeglądarki, w tym IE9, warto wstrzymać się z używaniem vw i vh. Obecnie obsługuje je tylko Internet Explorer 9.

Podczas pracy z CCS bardzo łatwo jest w pewnym momencie utknąć, ponieważ czasami nawet pracując według znanej metody, zdarza się, że pojawiają się nowe problemy.

Wraz z rozwojem Internetu rośnie zapotrzebowanie na nowe rozwiązania. A ponieważ ty i ja jesteśmy projektantami stron internetowych i programistami front-end, nie mamy innego wyjścia, jak pracować z różnymi opcjami i pracować dobrze.

Oznacza to, że musimy umieć dobrze pracować nawet z tymi specyficznymi narzędziami, które zwykle są używane bardzo rzadko, ale zdarzają się sytuacje, kiedy są potrzebne.

Dziś chcielibyśmy opowiedzieć o niektórych narzędziach CSS. Każde z tych narzędzi jest jak jednostka miary, jak piksel lub ems, ale prawdopodobnie o nich nie wiedziałeś.

Zacznijmy od czegoś, co prawdopodobnie już znasz. Jednostka em jest zdefiniowana jako bieżący rozmiar czcionki. Tak więc, jeśli ustawisz rozmiar czcionki na elemencie body, na przykład, wartość em dowolnego mniejszego elementu w ciele będzie równa temu rozmiarowi czcionki.

body ( font-size: 14px; ) div ( font-size: 1.2em; // obliczona na 14px * 1.2 lub 16,8px )

Tutaj napisaliśmy, że div będzie miał rozmiar czcionki 1,2 em. Jest to 1,2 razy większy od rozmiaru czcionki, z którego odziedziczył, czyli 14 pikseli. Wynik to 16,8px.

Jednak co się stanie, jeśli ustawisz w kaskadzie rozmiary czcionek zdefiniowane przez ems? W następnym fragmencie stosujemy ten sam CCS, co powyżej. Każdy element div dziedziczy rozmiar czcionki od swojego rodzica, co daje nam coraz większe rozmiary czcionek.

Chociaż w niektórych przypadkach może to być właściwe, często chcemy zmierzyć tylko jedną metrykę. W takim przypadku musimy użyć rem. „r” w rem oznacza „root”; jest równy rozmiarowi czcionki ustawionemu w elemencie głównym; w większości przypadków jest to element HTML.

Html ( rozmiar czcionki: 14px; ) div ( rozmiar czcionki: 1.2rem; )

We wszystkich trzech divach z poprzedniego przykładu czcionka może mieć do 16,8px.

5 punktów, siatka

Remy są przydatne nie tylko do zmiany rozmiaru czcionki. Na przykład, możemy oprzeć cały system siatki lub bibliotekę interfejsu użytkownika na wykorzystaniu rozmiaru Czcionka HTML root rem i używaj ich obliczeń w określonych miejscach. To dałoby nam bardziej przewidywalny rozmiar czcionki i obliczenia.

Kontener (szerokość: 70rem; // 70 * 14px = 980px )

Ideą jest to, aby nasz interfejs był współmierny do rozmiaru treści. Chociaż nie jest konieczne, aby w każdym przypadku miało to to samo znaczenie.

vh i vw

Techniki responsywnego projektowania stron internetowych w dużej mierze opierają się na regule procentowej. Jednak procent CSS nie zawsze jest najlepszym rozwiązaniem na każdy problem. Szerokość CSS jest powiązany z najbliższym elementem, który zawiera rodzica. A co jeśli chcemy użyć szerokości lub wysokości rzutni zamiast szerokości oryginalnego elementu? Właśnie w tym pomagają jednostki vh i vw.

Element vh jest równy 1/100 wysokości rzutni. Na przykład, jeśli wysokość przeglądarki wynosi 900px, 1vh może wzrosnąć do 9px. Również jeśli szerokość widocznego obszaru wynosi 750px, 1vw może osiągnąć 7,5px.

Wydaje się, że ta zasada może być stosowana w nieskończoność. Na przykład bardzo prostym sposobem na osiągnięcie pełnej wysokości lub w przybliżeniu pełnej wysokości slajdów za pomocą jednej linii CSS jest:

Zjeżdżalnia (wysokość: 100vh; )

Załóżmy, że chcesz utworzyć tytuł, który wypełnia całą szerokość ekranu. Aby to zrobić, musisz ustawić rozmiar czcionki na vw. Ten rozmiar będzie współmierny do szerokości przeglądarki.

vmin i vmax

Podczas gdy vh i vm są zawsze związane z wysokością i szerokością rzutni, vmin i vmax są również powiązane z maksimum i minimum tej wysokości i szerokości, w zależności od tego, która jest mniejsza, a która większa. Na przykład, jeśli przeglądarka ma 1100 pikseli szerokości i 700 pikseli wysokości, 1vmin będzie miał 7px, a 1vmax będzie 11px. Jeśli jednak szerokość jest ustawiona na 800px, a wysokość na 1080px, to vmin będzie wynosić 8px, a vmax zostanie ustawione na 10,8px.

W jakich przypadkach możesz użyć tych wartości?

Wyobraź sobie, że potrzebujesz elementu, który zawsze pozostaje widoczny na ekranie. Użycie wysokości i szerokości ustawionej na wartość vmin poniżej 100 pozwoli ci to osiągnąć. Na przykład kwadratowy element, który dotyka co najmniej dwóch części ekranu, można zdefiniować w następujący sposób:

Pudełko (wysokość: 100vmin; szerokość: 100vmin; )

Jeśli chcesz kwadratu, który pokryje cały obszar rzutni, użyj tych samych zasad, z wyjątkiem vmax.

Pudełko (wysokość: 100vmax; szerokość: 100vmax; )

Połączenie tych zasad pozwoli Ci bardzo elastycznie i z maksymalną produktywnością korzystać z rozmiaru twojego okienka ekranu.

ex i ch

Jednostki ex i ch, takie jak em i rem, odnoszą się do aktualnej czcionki i jej rozmiaru. Jednakże, ponieważ są one oparte na miarach specyficznych dla czcionki, ex i ch również mapują do rodziny czcionek, w przeciwieństwie do em i rem.

Jednostka ch lub jednostka znaku jest zdefiniowana jako „ulepszona miara” szerokości znaku 0. Koncepcja ta wywołała wiele dyskusji, ale podstawową ideą jest to, że przy czcionce o stałej szerokości kwadrat ze znakiem N jednostki szerokości, takie jak szerokość: 40ch; może zawsze zawierać sekwencję 40 znaków w tej konkretnej czcionce. Dopóki powszechne zastosowanie Z tej szczególnej zasady jest układ brajlowski, zakres kreatywności tutaj oczywiście wykracza poza te proste stwierdzenia.

Jednostka ex jest zdefiniowana jako „wysokość x aktualnej czcionki LUB jeden-dwa z em”. Wysokość tex danej czcionki - wysokość małe litery x tej czcionki. Najczęściej jest to mniej więcej środkowy znak czcionki.

Jest wiele obszarów, w których można zastosować takie jednostki. Najczęściej w druku. Na przykład element sup, który działa jak indeks górny, może zostać dodany do ciągu znaków przy użyciu odpowiedniej pozycji i końcowej wartości 1ex. Podobnie możesz zresetować dolny element. Błędy przeglądarki są naprawiane przez reguły wyrównania w pionie specyficzne dla indeksu górnego i dolnego, ale jeśli chcesz mieć większą kontrolę, możesz wypróbować następujące rozwiązania:

Sup ( pozycja: względna; dół: 1ex; ) sub ( pozycja: względna; dół: -1ex; )

Wyjście

Ważne jest, aby być na bieżąco z ewolucją i rozprzestrzenianiem się CSS, a także poznawać nowe narzędzia i dodawać je do swojej listy umiejętności. Najprawdopodobniej napotkasz problemy, które można rozwiązać za pomocą tych jednostek. Poświęć trochę czasu na zapoznanie się ze specyfikacją. Subskrybuj aktualizacje z cssweekly. I oczywiście nie zapomnij zasubskrybować cotygodniowych aktualizacji i bezpłatnych filmów instruktażowych na Tuts+!