W miarę zwiększania liczby użytkowników telefonów komórkowych w internecie projektanci stron internetowych stają się coraz ważniejszym narzędziem układania treści w sposób dopasowany do ekranów o różnej wielkości. Elastyczne projektowanie witryn (wstępnie zdefiniowane przez Ethana Marcotte'a w publikacji A List Apart) to strategia, która pozwala reagować na potrzeby użytkowników i możliwości ich urządzeń, dostosowując układ witryny do używanych urządzeń. Na przykład strona elastyczna może wyświetlać treści w jednej kolumnie na telefonie, w 2 kolumnach na tablecie oraz w 3 lub 4 kolumnach na komputerze stacjonarnym.
Urządzenia z dostępem do internetu mają wiele różnych rozmiarów ekranów, dlatego ważne jest, aby Twoja witryna dostosowywała się do obecnych i przyszłych rozmiarów ekranów. Nowoczesne elastyczne projektowanie stron uwzględnia też tryby interakcji, takie jak ekrany dotykowe. Chcemy zapewnić jak najlepsze wrażenia wszystkim użytkownikom.
Ustawianie widocznego obszaru
Strony zoptymalizowane pod kątem różnych urządzeń muszą zawierać metatag viewport w nagłówku dokumentu. Ten tag informuje przeglądarkę o sposobie kontrolowania wymiarów i skalowania strony.
W trosce o wygodę użytkowników przeglądarki mobilne renderują stronę na szerokość ekranu komputera (zwykle około 980px, choć czas ten może się różnić w zależności od urządzenia). Następnie próbują poprawić wygląd treści, zwiększając rozmiar czcionki i skalując jej zawartość, by pasowała do ekranu. Może to powodować niespójność czcionek i wymagać od użytkowników powiększenia treści, aby móc je zobaczyć i z nimi pracować.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Użycie wartości meta viewport width=device-width powoduje dopasowanie szerokości ekranu do pikseli niezależnych od urządzenia (DIP), czyli standardowej wizualnej jednostki piksela (która może składać się z wielu fizycznych pikseli na ekranie o wysokiej gęstości). Dzięki temu strona może dopasowywać zawartość do różnych rozmiarów ekranu.
Niektóre przeglądarki zachowują stałą szerokość strony po przełączeniu na orientację poziomą i zamiast przewijania powiększają obraz, aby wypełnić ekran. Dodanie wartości initial-scale=1 informuje przeglądarki o ustawianiu relacji 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia niezależnie od orientacji urządzenia. Pozwoli to stronom korzystać z pełnej szerokości poziomej.
Nie ma tagu <meta name="viewport"> z wartością width lub initial-scale. Audyt Lighthouse może pomóc Ci zautomatyzować proces sprawdzania, czy dokumenty HTML prawidłowo używają metatagu viewport.
Dopasowywanie rozmiaru zawartości do widocznego obszaru
Zarówno na komputerach, jak i na urządzeniach mobilnych użytkownicy przewijają strony w kierunku pionowym, a nie poziomym. Zmuszanie użytkownika do przewijania w poziomie lub do pomniejszenia widoku strony w celu wyświetlenia całej strony negatywnie wpływa na wrażenia użytkowników.
Podczas tworzenia witryny mobilnej z tagiem meta viewport często zdarza się, że treści strony są przypadkowo tworzone w sposób, który nie pasuje do określonego widocznego obszaru. Na przykład obraz wyświetlany szerzej niż widok może powodować przewijanie poziome. Aby temu zapobiec, dostosuj treści tak, aby mieściły się w widoku.
Zawartość nie jest odpowiednio dopasowana do widocznego obszaru. Audyt Lighthouse może pomóc Ci zautomatyzować proces wykrywania treści, które wystają poza widoczny obszar.
Obrazy
Obraz o stałych wymiarach powoduje przewijanie strony, jeśli jest większa niż widoczny obszar. Zalecamy, aby wszystkie obrazy miały max-width 100%, co powoduje ich zmniejszenie, aby pasowały do dostępnej przestrzeni, a jednocześnie zapobiega rozciąganiu się obrazu poza pierwotny rozmiar.
W większości przypadków możesz to zrobić, dodając do arkusza stylów ten kod:
img {
max-width: 100%;
display: block;
}
Dodaj wymiary obrazu do elementu img
Nawet jeśli ustawisz atrybut max-width: 100%, zalecamy dodanie atrybutów width i height do tagów <img>, aby przeglądarka mogła zarezerwować miejsce na obrazy przed ich załadowaniem. Pomaga to zapobiegać przesuniięciom układu.
Układ
Wymiary ekranu i szerokość w pikselach CSS różnią się znacznie w zależności od urządzenia (np. telefony i tablety, a nawet różne telefony), dlatego nie należy polegać na określonej szerokości widocznego obszaru.
W przeszłości wymagane było podanie wartości procentowych w elementach układu. Korzystanie z pikselowych pomiarów wymaga od użytkownika przewijania poziomego na małych ekranach:
Użycie procentów powoduje, że kolumny są węższe na mniejszych ekranach, ponieważ każda kolumna zajmuje zawsze ten sam procent szerokości ekranu:
Nowoczesne techniki układu CSS, takie jak Flexbox, Układ siatki i Multicol, znacznie ułatwiają tworzenie takich elastycznych siatek.
Flexbox
Użyj Flexboxa, gdy masz zestaw elementów o różnych rozmiarach i chcesz, aby mieściły się one wygodnie w jednym lub kilku wierszach, przy czym mniejsze elementy powinny zajmować mniej miejsca, a większe więcej.
.items {
display: flex;
justify-content: space-between;
}
Za pomocą Flexbox możesz wyświetlać elementy jako pojedynczy wiersz lub zawijane do wielu wierszy, gdy ilość dostępnego miejsca się zmniejsza.
Układ siatki CSS
Układ siatki CSS tworzy elastyczne siatki. Możesz ulepszyć wcześniejszy przykład z elementem wyśrodkowanym, używając układu siatki i jednostki fr, która reprezentuje część dostępnej przestrzeni w kontenerze.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Możesz też użyć układu siatki, aby tworzyć zwykłe układy siatki z tak dużą liczbą elementów, jak się mieści. Liczba dostępnych utworów zmniejsza się wraz ze zmniejszaniem rozmiaru ekranu. Ten pokaz demonstracyjny przedstawia siatkę zawierającą tyle kart, ile mieści się w każdym wierszu, z minimalnym rozmiarem 200px.
Więcej informacji o układzie siatki CSS
Układ z wieloma kolumnami
W przypadku niektórych typów układu możesz użyć układu wielokolumnowego (multicol), który tworzy elastyczną liczbę kolumn za pomocą właściwości column-width.
W tym pokazie strona dodaje kolumny, gdy jest miejsce na kolejną kolumnę 200px.
Więcej informacji o kolumnach wielopoziomowych
Korzystanie z zapytań multimedialnych CSS w celu zapewnienia responsywności
Czasami konieczne może być wprowadzenie bardziej rozległych zmian w układzie, aby obsługiwać określone rozmiary ekranu, które nie są obsługiwane przez opisane wcześniej techniki. W tym przypadku przydatne stają się zapytania o multimedia.
Zapytania multimedialne to proste filtry, które możesz stosować do stylów CSS, aby zmieniać te style w zależności od typu urządzenia renderującego zawartość. Mogą też zmieniać styl w zależności od funkcji urządzenia, takich jak szerokość, wysokość i orientacja, a także to, czy urządzenie jest używane jako ekran dotykowy.
Aby zapewnić różne style do drukowania, możesz ustawić typ wyjściowy i włączyć arkusz stylów dla stylów do drukowania:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Możesz też użyć zapytania o media, aby uwzględnić style drukowania w głównym arkuszu stylów:
@media print {
/* print styles go here */
}
W przypadku elastycznego projektowania stron najczęściej występują zapytania dotyczące funkcji urządzenia, więc możesz dostosować układ do ekranów dotykowych lub mniejszych ekranów.
Zapytania o multimedia na podstawie rozmiaru widocznego obszaru
Zapytania o multimedia pozwalają tworzyć środowisko elastyczne, które stosuje określone style do określonego rozmiaru ekranu. Zapytania dotyczące rozmiaru ekranu mogą sprawdzać te kwestie:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Wszystkie te funkcje są doskonale obsługiwane przez przeglądarki. Więcej informacji, w tym informacje o obsłudze przeglądarek, znajdziesz w artykułach width, height, orientation i aspect-ratio w MDN.
Zapytania o multimedia na podstawie możliwości urządzenia
Biorąc pod uwagę szeroką gamę urządzeń, programiści nie mogą zakładać, że każde duże urządzenie to zwykły komputer stacjonarny lub laptop, ani że każde małe urządzenie ma ekran dotykowy. Niektóre nowsze dodatki do specyfikacji zapytań o multimedia umożliwiają testowanie funkcji takich jak typ wskaźnika używanego do interakcji z urządzeniem oraz to, czy użytkownik może przytrzymać wskaźnik nad elementami.
hoverpointerany-hoverany-pointer
Wyświetl tę wersję demonstracyjną na różnych urządzeniach, takich jak komputer stacjonarny, telefon lub tablet.
Te nowsze funkcje są dobrze obsługiwane we wszystkich nowoczesnych przeglądarkach. Więcej informacji znajdziesz na stronach MDN dotyczących najechania kursorem, dowolnego najechania kursorem, wskaźnika i dowolnego wskaźnika.
Użyj właściwości any-hover i any-pointer
Funkcje any-hover i any-pointer sprawdzają, czy użytkownik może przytrzymać wskaźnik nad elementami (czyli najechać kursorem), lub czy w ogóle może używać wskaźnika, nawet jeśli nie jest to jego główny sposób interakcji z urządzeniem. Należy zachować szczególną ostrożność podczas korzystania z tych funkcji, aby na przykład nie zmuszać użytkownika ekranu dotykowego do przełączania się na mysz.
Jednak any-hover i any-pointer mogą być przydatne, jeśli ważne jest określenie, jakie urządzenie ma użytkownik. Na przykład laptop z ekranem dotykowym i gładzikiem powinien obsługiwać wskaźniki grube i precyzyjne, a także umożliwiać nawigację za pomocą kursora.
Jak wybierać punkty przerwania
Nie definiuj punktów przerwania na podstawie klas urządzeń, produktów, nazw marek czy systemu operacyjnego. Utrudnia to utrzymanie kodu. Pozwól, aby treść określiła, jak zmienia się jej układ, aby mieścił się w kontenerze.
Wybierz główne punkty przecięcia, zaczynając od małych, a potem zwiększając ich liczbę.
Najpierw zaprojektuj treści tak, aby pasowały do małego ekranu, a potem poszerzaj ekran, aż pojawi się punkt kontrolny. Pozwala to zminimalizować liczbę punktów przerwania na stronie i je zoptymalizować na podstawie treści.
W tym przykładzie omówiono widżet prognozy pogody, który znajduje się na początku tej strony. Najpierw musisz zadbać o to, aby prognoza dobrze wyglądała na małym ekranie:
Następnie zmień rozmiar przeglądarki, aż między elementami będzie zbyt dużo pustej przestrzeni, co spowoduje, że widżet będzie wyglądał dobrze. Decyzja jest subiektywna, ale więcej niż 600px
zdecydowanie za szerokie.
Aby wstawić punkt przerwania w miejscu 600px, utwórz 2 zapytania o media na końcu kodu CSS komponentu: jedno do użycia, gdy przeglądarka ma rozmiar 600px lub węższy, a drugie, gdy jest szersza niż 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Na koniec zoptymalizuj kod CSS. W zapytaniu o multimedia dla max-width w układance 600px dodaj kod CSS przeznaczony tylko do małych ekranów. W zapytaniu o multimedia dla min-width z 601px dodaj kod CSS dla większych ekranów.
W razie potrzeby wybierz mniejsze punkty przerwania
Oprócz wybierania głównych punktów przecięcia, gdy układ ulega znacznym zmianom, warto też dostosować się do drobnych zmian. Na przykład między głównymi punktami kontrolnymi warto dostosować marginesy lub wypełnienie elementu albo zwiększyć rozmiar czcionki, aby element wyglądał bardziej naturalnie w łayoucie.
W tym przykładzie zastosowano ten sam schemat co w poprzednim, zaczynając od optymalizacji układów na mniejsze ekrany. Najpierw zwiększ czcionkę, gdy szerokość widoku jest większa niż 360px. Następnie, gdy będzie już wystarczająco dużo miejsca,
możesz rozdzielić temperatury wysokie i niskie tak, aby znajdowały się w tym samym wierszu, i powiększyć ikony pogody.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
W przypadku dużych ekranów zalecamy ograniczenie maksymalnej szerokości panelu prognozy, aby nie zajmował on całej szerokości ekranu.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Optymalizacja tekstu pod kątem czytania
Klasyczna teoria czytelności sugeruje, że idealna kolumna powinna zawierać 70–80 znaków na wiersz (około 8–10 słów w języku angielskim). Rozważ dodawanie punktu przerwania za każdym razem, gdy szerokość bloku tekstowego przekracza 10 słów.
W tym przykładzie czcionka Roboto o wartości 1em wyświetla 10 słów na wiersz na mniejszym ekranie, ale na większych ekranach potrzebny jest punkt przełamania. W tym przypadku, jeśli szerokość przeglądarki jest większa niż 575px, idealna szerokość treści to 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Unikanie ukrywania treści (:#unikaj ukrywania treści)
Zachowaj ostrożność przy wybieraniu treści do ukrycia lub wyświetlenia w zależności od rozmiaru ekranu. Nie ukrywaj treści tylko dlatego, że nie mieszczą się na ekranie. Rozmiar ekranu nie pozwala przewidzieć, co użytkownik chce zobaczyć. Na przykład usunięcie z prognozy pogody informacji o liczbie pyłków może być poważnym problemem dla osób cierpiących na alergie wiosenne, które potrzebują tych informacji, aby zdecydować, czy mogą wyjść na zewnątrz.
Wyświetlanie punktów przerwania zapytań dotyczących multimediów w Narzędziach deweloperskich w Chrome
Po skonfigurowaniu punktów kontrolnych zapytań o multimedia sprawdź, jak wpływają one na wygląd witryny. Możesz zmienić rozmiar okna przeglądarki, aby wywołać punkty kontrolne, ale narzędzia dla deweloperów w Chrome mają wbudowaną funkcję, która pokazuje, jak strona wygląda w przypadku różnych punktów kontrolnych.
Aby wyświetlić stronę w różnych punktach przełamania:
- Otwórz Narzędzia deweloperskie.
- Włącz Tryb urządzenia. Domyślnie otworzy się on w trybie dostosowującym się do urządzenia.
- Aby wyświetlić zapytania o multimedia, otwórz menu Tryb urządzenia i wybierz Pokaż zapytania o multimedia. Punkty przełamania są widoczne jako kolorowe paski nad stroną.
- Kliknij jeden z pasków, aby wyświetlić stronę, gdy aktywne jest to zapytanie o multimedia. Kliknij prawym przyciskiem myszy pasek, aby przejść do definicji zapytania o multimedia.