Wraz ze wzrostem liczby użytkowników internetu korzystających z telefonów komórkowych coraz ważniejsze staje się projektowanie stron internetowych w taki sposób, aby treści były dobrze widoczne na ekranach o różnych rozmiarach. Elastyczny projekt witryny, pierwotnie zdefiniowany przez Ethana Marcotte w artykule A List Apart, to strategia projektowania, która reaguje na potrzeby użytkowników i możliwości ich urządzeń, zmieniając układ witryny w zależności od używanego urządzenia. Na przykład elastyczna witryna może wyświetlać treści w widoku jednokolumnowym na telefonie, w widoku dwukolumnowym na tablecie oraz w widoku trój- lub czterokolumnowym na komputerze.
Urządzenia z dostępem do internetu mają wiele różnych rozmiarów ekranów, dlatego ważne jest, aby witryna dostosowywała się do każdego z nich – zarówno obecnych, jak i przyszłych. Nowoczesne elastyczne projektowanie stron uwzględnia też sposoby interakcji, takie jak ekrany dotykowe. Chcemy zoptymalizować działanie usługi dla wszystkich użytkowników.
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ę, jak kontrolować rozmiar i skalowanie strony.
Aby zapewnić jak najlepsze wrażenia, przeglądarki mobilne renderują stronę na szerokość ekranu komputera (zwykle ok. 980px, ale ten rozmiar różni się w zależności od urządzenia), a następnie poprawiają wygląd tekstu, zwiększając rozmiar czcionki lub dopasowując zawartość strony w taki sposób, by na ekranie mieściła się cała treść. Może to powodować niespójny wygląd czcionek i wymagać od użytkowników powiększania treści, aby mogli ją zobaczyć i z niej korzystać.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Użycie wartości widocznego obszaru width=device-width informuje stronę, że ma dopasować się do szerokości ekranu w pikselach niezależnych od urządzenia (DIP), czyli standardowej jednostce pikseli wizualnych (która na ekranie o wysokiej gęstości może składać się z wielu pikseli fizycznych). Dzięki temu strona może zmieniać układ treści, aby dopasować go do różnych rozmiarów ekranu.
Niektóre przeglądarki zachowują stałą szerokość strony po obróceniu do trybu poziomego i powiększają ją, aby wypełnić ekran, zamiast zmieniać układ. Dodanie wartości initial-scale=1 powoduje, że przeglądarki ustawiają stosunek 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia niezależnie od orientacji urządzenia, co pozwala stronie wykorzystać pełną szerokość w orientacji poziomej.
Audyt Lighthouse Nie zawiera tagu <meta name="viewport"> z wartością width lub initial-scale może pomóc w zautomatyzowaniu procesu sprawdzania, czy dokumenty HTML prawidłowo używają metatagu viewport.
Dopasowywanie rozmiaru treści do widocznego obszaru
Zarówno na komputerach, jak i na urządzeniach mobilnych użytkownicy są przyzwyczajeni do przewijania stron internetowych w pionie, a nie w poziomie. Zmuszanie użytkownika do przewijania w poziomie lub oddalania widoku, aby zobaczyć całą stronę, wywiera złe wrażenie na użytkownikach.
Podczas tworzenia witryny mobilnej z metatagiem viewport często zdarza się, że zawartość strony nie mieści się w określonym widocznym obszarze. Na przykład obraz wyświetlany w szerszym widoku niż obszar widoczny może powodować przewijanie w poziomie. Aby temu zapobiec, dostosuj treść tak, aby mieściła się w obszarze widoku.
Audyt Lighthouse Zawartość nie jest odpowiednio dopasowana do widocznego obszaru może pomóc w automatyzacji procesu wykrywania przepełniającej się zawartości.
Obrazy
Obraz o stałych wymiarach powoduje przewijanie strony, jeśli jest większy niż obszar widoczny. Zalecamy ustawienie wartości max-width na 100% dla wszystkich obrazów. Spowoduje to zmniejszenie obrazów, aby dopasować je do dostępnego miejsca, a jednocześnie zapobiegnie rozciąganiu ich 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 max-width: 100%, nadal 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ć przesunięciom układu.
Układ
Wymiary i szerokość ekranu w pikselach CSS różnią się znacznie w zależności od urządzenia (np. między telefonami a tabletami, a nawet między różnymi telefonami), dlatego zawartość nie powinna być zależna od konkretnej szerokości widocznego obszaru, aby dobrze się wyświetlać.
Wcześniej wymagało to ustawienia elementów układu w procentach. Używanie pomiarów w pikselach wymaga przewijania w poziomie na małych ekranach:
Użycie procentów sprawia, że kolumny są węższe na mniejszych ekranach, ponieważ każda kolumna zawsze zajmuje ten sam procent szerokości ekranu:
Nowoczesne techniki układu CSS, takie jak flexbox, układ siatki i wielokolumnowy, znacznie ułatwiają tworzenie elastycznych siatek.
Flexbox
Używaj Flexboxa, gdy masz zestaw elementów o różnych rozmiarach i chcesz, aby mieściły się wygodnie w jednym lub kilku wierszach, przy czym mniejsze elementy zajmują mniej miejsca, a większe więcej.
.items {
display: flex;
justify-content: space-between;
}
Za pomocą Flexboxa możesz wyświetlać elementy w jednym wierszu lub w wielu wierszach, gdy dostępna przestrzeń się zmniejsza.
Więcej informacji o układzie flexbox
Układ siatki CSS
Układ siatki CSS tworzy elastyczne siatki. Wcześniejszy przykład można ulepszyć, korzystając z układu siatki i jednostki fr, która reprezentuje część dostępnego miejsca w kontenerze.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Możesz też użyć siatki do tworzenia zwykłych układów siatki z dowolną liczbą elementów. Liczba dostępnych ścieżek zmniejsza się wraz ze zmniejszaniem się rozmiaru ekranu. Poniższa wersja demonstracyjna pokazuje siatkę zawierającą tyle kart, ile mieści się w każdym wierszu, przy minimalnym rozmiarze 200px.
Więcej informacji o układzie siatki CSS
Układ wielokolumnowy
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.
Na poniższym filmie demonstracyjnym strona dodaje kolumny, gdy jest miejsce na kolejną kolumnę 200px.
Używanie zapytań multimedialnych CSS do zapewnienia elastyczności
Czasami może być konieczne wprowadzenie bardziej rozległych zmian w układzie, aby obsługiwać określone rozmiary ekranu, niż pozwalają na to opisane wcześniej techniki. W takich sytuacjach przydają się zapytania o multimedia.
Zapytania o multimedia to proste filtry, które możesz zastosować do stylów CSS, aby zmieniać te style w zależności od typu urządzenia renderującego treść. Mogą też zmieniać stylizację w zależności od funkcji urządzenia, takich jak szerokość, wysokość, orientacja i to, czy urządzenie jest używane jako ekran dotykowy.
Aby zapewnić różne style drukowania, możesz kierować reklamy na typ wyjścia i uwzględnić arkusz stylów dla stylów 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ęstsze zapytania dotyczą funkcji urządzenia, dzięki czemu możesz dostosować układ do ekranów dotykowych lub mniejszych ekranów.
Zapytania o multimedia na podstawie rozmiaru widocznego obszaru
Zapytania o multimedia umożliwiają tworzenie elastycznych stron, które stosują określone style do określonych rozmiarów ekranu. Zapytania dotyczące rozmiaru ekranu mogą sprawdzać te kwestie:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Zapytania o media oparte na możliwościach urządzenia
Ze względu na różnorodność dostępnych urządzeń deweloperzy 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 korzysta z ekranu dotykowego. Niektóre nowsze dodatki do specyfikacji zapytań o media 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, np. na zwykłym komputerze stacjonarnym oraz na telefonie lub tablecie.
Te nowsze funkcje są dobrze obsługiwane we wszystkich nowoczesnych przeglądarkach. Więcej informacji znajdziesz na stronach MDN poświęconych hover, any-hover, pointer i any-pointer.
Użyj any-hover i any-pointer
Funkcje any-hover i any-pointer sprawdzają, czy użytkownik może przytrzymać wskaźnik nad elementami (często nazywane najechaniem) lub w ogóle używać wskaźnika, nawet jeśli nie jest to podstawowy sposób interakcji z urządzeniem. Zachowaj ostrożność podczas korzystania z tych funkcji, aby np. nie zmuszać użytkownika ekranu dotykowego do przełączenia się na mysz.
Jednak any-hover i any-pointer mogą być przydatne, jeśli ważne jest określenie, jakiego rodzaju urządzenia używa użytkownik. Na przykład laptop z ekranem dotykowym i panelem dotykowym powinien obsługiwać wskaźniki grube i cienkie, a także funkcję najeżdżania kursorem.
Jak wybierać punkty przerwania
Nie definiuj punktów przerwania na podstawie klas urządzeń ani żadnych produktów, nazw marek ani systemów operacyjnych. Utrudnia to konserwację kodu. Zamiast tego pozwól, aby treść określała, jak zmieni się jej układ, aby dopasować się do kontenera.
Wybierz główne punkty przerwania, zaczynając od małych, a potem zwiększając ich liczbę.
Zaprojektuj treść tak, aby najpierw pasowała do małego ekranu, a następnie rozszerzaj ekran, aż stanie się konieczny punkt przerwania. Dzięki temu możesz zminimalizować liczbę punktów przerwania na stronie i zoptymalizować je na podstawie treści.
Poniższy przykład dotyczy widżetu prognozy pogody, który znajduje się na początku tej strony. Pierwszym krokiem jest dostosowanie prognozy do małego ekranu:
Następnie zmień rozmiar przeglądarki, aż między elementami pojawi się zbyt dużo białego miejsca, aby widżet wyglądał dobrze. Decyzja jest subiektywna, ale na pewno zbyt szeroki jest zakres powyżej 600px.
Aby wstawić punkt przerwania w miejscu 600px, utwórz na końcu kodu CSS komponentu 2 zapytania o media: jedno do użycia, gdy szerokość przeglądarki wynosi 600px lub mniej, a drugie, gdy jest większa niż 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Na koniec przeprowadź refaktoryzację kodu CSS. W zapytaniu o multimedia dla max-width o wartości 600px dodaj kod CSS, który jest przeznaczony tylko dla małych ekranów. W zapytaniu o multimedia dla elementu a
min-width o 601px dodaj kod CSS dla większych ekranów.
W razie potrzeby wybieraj mniejsze punkty przerwania
Oprócz wybierania głównych punktów przerwania, gdy układ ulega znacznym zmianom, warto też dostosowywać go do mniejszych zmian. Na przykład między głównymi punktami przerwania warto dostosować marginesy lub dopełnienie elementu albo zwiększyć rozmiar czcionki, aby układ wyglądał bardziej naturalnie.
Ten przykład jest zgodny z poprzednim, zaczynając od optymalizacji układów na mniejszych ekranach. Najpierw zwiększ rozmiar czcionki, gdy szerokość obszaru wyświetlania jest większa niż 360px. Gdy będzie wystarczająco dużo miejsca, możesz rozdzielić temperatury maksymalną i minimalną, aby były 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ł całej szerokości ekranu.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Optymalizowanie tekstu pod kątem czytania
Klasyczna teoria czytelności sugeruje, że idealna kolumna powinna zawierać od 70 do 80 znaków w wierszu (około 8–10 słów w języku angielskim). Rozważ dodanie podziału wiersza za każdym razem, gdy szerokość bloku tekstu przekroczy około 10 słów.
W tym przykładzie czcionka Roboto w rozmiarze 1em wyświetla 10 słów w wierszu na mniejszym ekranie, ale większe ekrany wymagają punktu przerwania. 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;
}
}
Unikaj ukrywania treści (:#avoid-hiding-content)
Zachowaj ostrożność przy wyborze 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 może zainteresować użytkownika. Na przykład usunięcie z prognozy pogody informacji o stężeniu pyłków może być poważnym problemem dla osób cierpiących na wiosenne alergie, które potrzebują tych informacji, aby zdecydować, czy mogą wyjść na zewnątrz.
Wyświetlanie punktów przerwania zapytań o media w Narzędziach deweloperskich w Chrome
Po skonfigurowaniu punktów przerwania zapytania o media sprawdź, jak wpływają one na wygląd witryny. Możesz zmienić rozmiar okna przeglądarki, aby wywołać punkty przerwania, ale narzędzia deweloperskie w Chrome mają wbudowaną funkcję, która pokazuje, jak strona wygląda w różnych punktach przerwania.
Aby wyświetlić stronę w różnych punktach przerwania:
- Otwórz Narzędzia deweloperskie.
- Włącz Tryb urządzenia. Domyślnie otworzy się w trybie elastycznym.
- Aby wyświetlić zapytania o media, otwórz menu Tryb urządzenia i kliknij Pokaż zapytania o media. Punkty przerwania są widoczne jako kolorowe paski nad stroną.
- Kliknij jeden ze słupków, aby wyświetlić stronę, gdy to zapytanie o media jest aktywne. Kliknij prawym przyciskiem myszy pasek, aby przejść do definicji danego zapytania o media.