Podstawy responsywnego projektowania stron internetowych

• Ustaw viewport
• Rozmiar zawartości na viewport
• użyj zapytań CSS dla responsywności
• Jak wybrać punkty przerwania
• wyświetl punkty przerwania zapytań o media w Chrome DevTools

korzystanie z urządzeń mobilnych do surfowania po Internecie rośnie w astronomicznym tempie, a urządzenia te są często ograniczone przez rozmiar wyświetlania i wymagają innego podejścia do zawartość jest przedstawiona na ekranie.,

Responsive web design, pierwotnie zdefiniowany przez Ethana Marcotte ' a na liście Apart, odpowiada na potrzeby użytkowników i urządzeń, z których korzystają. Układ zmienia się w zależności od rozmiaru i możliwości urządzenia. Na przykład w telefonie użytkownicy będą widzieć zawartość wyświetlaną w widoku pojedynczej kolumny; tablet może wyświetlać tę samą zawartość w dwóch kolumnach.

wiele różnych rozmiarów ekranu istnieje w telefonach, „phabletach”, tabletach, komputerach stacjonarnych, konsolach do gier, telewizorach, a nawet urządzeniach do noszenia., Rozmiary ekranu zawsze się zmieniają, więc ważne jest, aby Twoja witryna mogła dostosować się do dowolnego rozmiaru ekranu, dziś lub w przyszłości. Ponadto urządzenia mają różne funkcje, z którymi współpracujemy. Na przykład niektórzy odwiedzający będą używać ekranu dotykowego. Nowoczesny responsywny projekt uwzględnia wszystkie te elementy, aby zoptymalizować wrażenia dla wszystkich.

Ustawia Port widoku #

strony zoptymalizowane pod kątem różnych urządzeń muszą zawierać znacznik meta viewport w nagłówku dokumentu.Znacznik meta viewport podaje przeglądarce instrukcje dotyczące kontrolowania wymiarów i skalowania strony.,

aby zapewnić jak najlepsze wrażenia, przeglądarki mobilne renderują stronę na szerokości ekranu pulpitu (Zwykle o980px, choć różni się to od innych urządzeń), a następnie starają się, aby zawartość wyglądała lepiej, zwiększając rozmiary i skalując zawartość, aby pasowała do ekranu.Oznacza to, że rozmiary czcionek mogą wydawać się niespójne dla użytkowników, którzy mogą być zmuszeni dwukrotnie stuknąć lub uszczypnąć w zoomin, aby zobaczyć i wejść w interakcję z treścią.,

użycie wartości meta viewportwidth=device-width instruuje stronę, aby dopasowała szerokość ekranu w pikselach niezależnych od urządzenia. Piksel niezależny od urządzenia (lub gęstości) jest reprezentacją pojedynczego piksela, który może na ekranie o wysokiej gęstości składać się z wielu pikseli fizycznych. Pozwala To stronie reflowcontent dopasować różne rozmiary ekranu, niezależnie od tego, czy są one wyświetlane na małym telefonie komórkowym, czy na dużym monitorze stacjonarnym.,

niektóre przeglądarki ustawiają stałą szerokość strony podczas obracania do landscapemode i powiększają zamiast ponownego wlewania, aby wypełnić ekran., Dodanie wartościinitial-scale=1 instruuje przeglądarki do ustanowienia relacji 1:1 pomiędzy Csspixelami a pikselami niezależnymi od urządzenia, niezależnie od orientacji urządzenia, i umożliwia stronie wykorzystanie pełnej szerokości krajobrazu.

nie ma znacznika<meta name="viewport"> zwidth lubinitial-scaleaudyt Lighthouse może pomóc zautomatyzować proces upewniania się, że Twoje dokumenty HTML prawidłowo używają znacznika meta viewport.,

upewnij się,że dostępny jest widok #

oprócz ustawienia initial-scale, możesz również ustawić następujące atrybuty na widoku:

• minimum-scale
• maximum-scale
• user-scalable

Po ustawieniu mogą one wyłączyć możliwość powiększania widoku przez użytkownika,co może powodować problemy z dostępnością.Dlatego nie rekomendowalibyśmy używania owych atrybutów.,

Rozmiar zawartości do widoku #

zarówno na komputerach,jak i urządzeniach mobilnych, użytkownicy są przyzwyczajeni do przewijania stron w pionie, ale nie w poziomie;zmuszanie użytkownika do przewijania w poziomie lub powiększania w kolejności, aby zobaczyć całą stronę, skutkuje słabym doświadczeniem użytkownika.

podczas tworzenia witryny mobilnej z tagiem meta viewport łatwo jest przypadkowo utworzyć zawartość strony,która nie pasuje do określonego viewportu.Na przykład obraz, który jest wyświetlany o szerokości większej niż port, może spowodować przewinięcie go w poziomie.,Zawartość należy dostosować tak,aby zmieściła się w szerokości widoku, aby użytkownik nie musiał przewijać jej w poziomie.

zawartość nie jest poprawnie dopasowana do programu viewportlighthouse audit może pomóc zautomatyzować proces wykrywania przepełnionych treści.

Images #

obraz ma stałe wymiary i jeśli jest większy niż widok spowoduje scrollbar.Powszechnym sposobem radzenia sobie z tym problemem jest nadanie wszystkim obrazom max-width100%.,Spowoduje to, że obraz zmniejszy się tak, aby pasował do posiadanej przestrzeni, jeśli rozmiar okna widokowego będzie mniejszy niż obraz.Jednak ponieważmax-width, zamiastwidth jest100%,obraz nie rozciągnie się większy niż jego naturalny size.It ogólnie można bezpiecznie dodać następujące elementy do stylów, aby nigdy nie mieć problemu z obrazami powodującymi pasek przewijania.,

Dodaj wymiary obrazu do elementu img #

podczas używania max-width: 100% nadpisujesz naturalne wymiary obrazu,jednak nadal powinieneś używać width I height atrybuty na Twoim <img> tag.Dzieje się tak,ponieważ nowoczesne przeglądarki będą używać tych informacji do rezerwowania miejsca na obraz przed załadowaniem, pomoże to uniknąć przesunięć układu podczas ładowania zawartości.,

układ #

ponieważ wymiary i szerokość ekranu w pikselach CSS różnią się znacznie między urządzeniami(na przykład między telefonami i tabletami, a nawet między różnymi telefonami), zawartość nie powinna zależeć od określonej szerokości widoku,aby renderować dobrze.

w przeszłości wymagało to elementów ustawień używanych do tworzenia układu w percentages.In w poniższym przykładzie można zobaczyć układ dwukolumnowy z elementami pływającymi, o rozmiarach pikseli.Gdy widok staje się mniejszy niż całkowita szerokość kolumn, musimy przewijać poziomo, aby zobaczyć zawartość.,

używając procentów szerokości, kolumny zawsze pozostają pewnym procentem kontenera.Oznacza to, że kolumny stają się węższe, zamiast tworzyć pasek przewijania.

nowoczesne techniki układania CSS, takie jak Flexbox, Grid Layout i Multicol, znacznie ułatwiają tworzenie tych elastycznych siatek.,

Flexbox #

ta metoda układania jest idealna,gdy masz zestaw elementów o różnych rozmiarach i chcesz, aby pasowały wygodnie w rzędzie lub rzędach, przy czym mniejsze elementy zajmują mniej miejsca, a większe otrzymują więcej miejsca.

w projekcie responsywnym za pomocą funkcji Flexbox można wyświetlać elementy w jednym wierszu lub owijać je w wielu wierszach w miarę zmniejszania dostępnej przestrzeni.

Przeczytaj więcej o Flexbox.

CSS Grid Layout #

CSS Grid Layout pozwala na proste tworzenie elastycznych siatek.,Jeśli weźmiemy pod uwagę wcześniejszy przykład, zamiast tworzyć nasze kolumny z procentami, możemy użyć układu siatki i jednostki fr, która reprezentuje część dostępnego miejsca w kontenerze.

siatka może być również używana do tworzenia regularnych układów siatki,z dowolną liczbą elementów.Liczba dostępnych ścieżek zostanie zmniejszona wraz z rozmiarem ekranu shrinks.In poniższe demo, mamy tyle kart, ile zmieści się w każdym rzędzie, z minimalnym rozmiarem 200px.,

Przeczytaj więcej o układzie siatki CSS

układ wielokolumnowy #

dla niektórych typów układu możesz użyć układu wielokolumnowego (Multicol), który może tworzyć responsywne liczby kolumn za pomocą column-width property.In w poniższym demo możesz zobaczyć, że kolumny są dodawane, jeśli jest miejsce na inną kolumnę 200px.,

Dowiedz się więcej o Multicol

użyj zapytań CSS dla responsywności #

czasami będziesz musiał wprowadzić bardziej rozbudowane zmiany w układzie, aby obsługiwać określony rozmiar ekranu, niż pozwalają na to techniki pokazane powyżej.Tutaj przydają się zapytania o media.

Media queries to proste filtry, które można zastosować do stylów CSS.,Ułatwiają one zmianę stylów w zależności od typów urządzeń renderujących zawartość lub funkcji tego urządzenia, na przykład szerokości, wysokości, orientacji,możliwości najechania kursorem i tego, czy urządzenie jest używane jako ekran dotykowy.,

aby zapewnić różne style do drukowania,musisz wybrać typ wydruku, aby można było dołączyć arkusz stylów ze stylami drukowania w następujący sposób:

Alternatywnie możesz dołączyć Style Drukowania w głównym arkuszu stylów za pomocą zapytania o media:

w przypadku responsywnego projektowania stron internetowych zazwyczaj pytamy o funkcje urządzenia, aby zapewnić inny układ dla mniejszych ekranów lub gdy wykryjemy,że nasz użytkownik korzysta z ekranu dotykowego.

zapytania o Media oparte na rozmiarze viewportu #

zapytania o Media pozwalają nam tworzyć responsywne doświadczenia wszędzie tam, gdzie określone style są stosowane na małych, dużych ekranach i w dowolnym miejscu pomiędzy.Cechą, którą tutaj wykrywamy, jest więc rozmiar ekranu i możemy przetestować następujące rzeczy.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

zapytania dotyczące mediów oparte na możliwości urządzenia #

biorąc pod uwagę zakres dostępnych urządzeń, nie możemy założyć, że każde duże urządzenie jest zwykłym komputerem stacjonarnym lub laptopem, lub że ludzie używają tylko ekranu dotykowego na małym urządzeniu.,Dzięki nowszym dodatkom do specyfikacji zapytań medialnych możemy przetestować funkcje, takie jak typ wskaźnika używanego do interakcji z urządzeniem i czy użytkownik może najechać na elementy.

• hover
• pointer

any-hover

• any-pointer

spróbuj wyświetlić to demo na różnych urządzeniach,takich jak zwykły komputer stacjonarny i telefon lub tablet.

te nowsze funkcje mają dobre wsparcie we wszystkich nowoczesnych przeglądarkach., Dowiedz się więcej na stronach MDN forhover,any-hover,pointer,any-pointer.

za pomocą any-hover I any-pointer #

funkcje any-hover I any-pointer testują, czy użytkownik ma zdolność do najechania kursorem, lub użyj tego rodzaj wskaźnika, nawet jeśli nie jest to podstawowy sposób interakcji z ich device.Be bardzo ostrożnie przy ich użyciu.Zmuszanie użytkownika do przełączenia się na mysz podczas korzystania z ekranu dotykowego nie jest zbyt przyjazne!,Jednak any-hover I any-pointer mogą być przydatne, jeśli ważne jest, aby dowiedzieć się, jakie urządzenie ma użytkownik.Na przykład laptop Z Ekranem dotykowym i gładzikiem powinien pasować do grubych i drobnych wskaźników,oprócz możliwości poruszania się.

jak wybrać punkty przerwania #

nie Definiuj punktów przerwania na podstawie klas urządzeń.Definiowanie punktów przerwania na podstawie konkretnych urządzeń, produktów,nazw marek lub systemów operacyjnych, które są obecnie używane, może skutkować koszmarem konserwacji.,Zamiast tego sama zawartość powinna określać sposób dopasowania układu do kontenera.

Wybierz główne punkty przerwania, zaczynając od małego,a następnie rozwijając #

najpierw Zaprojektuj zawartość tak, aby pasowała do małego rozmiaru ekranu, a następnie rozwiń ekran, aż do momentu, gdy będzie potrzebny punkt przerwania.Pozwala to na optymalizację punktów przerwania na podstawie zawartości i utrzymanie jak najmniejszej liczby punktów przerwania.

przejrzyjmy przykład, który widzieliśmy na początku: prognozę pogody.Pierwszym krokiem jest sprawienie, aby prognoza wyglądała dobrze na małym ekranie.,

następnie zmień rozmiar przeglądarki, aż nie będzie zbyt dużo białej przestrzeni między elementami, a Prognoza po prostu nie wygląda tak dobrze.Decyzja jest nieco subiektywna, ale powyżej 600px jest z pewnością zbyt szeroka.

aby wstawić punkt przerwania w 600px, utwórz dwa zapytania o media na końcu CSS dla komponentu,jedno do użycia, gdy przeglądarka jest 600px I poniżej, a drugie, gdy jest szersze niż 600px.

na koniec refakturuj CSS. Wewnątrz zapytania o media dla max-width z 600px,dodaj CSS, który jest tylko dla małych ekranów., Wewnątrz zapytania o media dlamin-width z 601px dodaj CSS dla większych ekranów.

Wybierz drobne punkty przerwania,gdy jest to konieczne #

oprócz wyboru głównych punktów przerwania, gdy układ zmienia się znacząco, pomocne jest również dostosowanie do drobnych zmian.Na przykład między głównymi punktami przerwania pomocne może być dostosowanie marginesów lub wypełnień elementu lub zwiększenie rozmiaru czcionki, aby było to bardziej naturalne w układzie.

Zacznijmy od optymalizacji układu małego ekranu.,W tym przypadku zwiększ czcionkę, gdy szerokość widoku jest większa niż 360px.Po drugie, gdy jest wystarczająco dużo miejsca, możemy oddzielić wysokie i niskie temperatury tak, że ” są one na tej samej linii, a nie jeden na drugim.I niech ” s również zrobić ikony pogody nieco większe.

podobnie w przypadku dużych ekranów najlepiej ograniczyć do maksymalnej szerokości panelu prognoz, a także nie zużywać całej szerokości ekranu.,

zoptymalizuj tekst do czytania #

klasyczna teoria czytelności sugeruje, że idealna kolumna powinna zawierać od 70 do 80 znaków w linii(około 8 do 10 słów w języku angielskim).Dlatego za każdym razem,gdy szerokość bloku tekstowego przekracza około 10 słów, rozważ dodanie punktu przerwania.

przyjrzyjmy się dokładniej powyższemu przykładowi posta na blogu.Na mniejszych ekranach czcionka Roboto w 1em działa doskonale dając 10 słów w linii,ale większe ekrany wymagają breakpoint.In w tym przypadku, jeśli szerokość przeglądarki jest większa niż 575px, idealna szerokość zawartości to 550px.,

unikaj ukrywania zawartości #

Uważaj przy wyborze zawartości do ukrycia lub pokazania w zależności od rozmiaru ekranu.Nie ukrywaj treści tylko dlatego, że nie możesz dopasować jej do ekranu.Rozmiar ekranu nie jest definitywnym wskaźnikiem tego, czego użytkownik może chcieć.Na przykład wyeliminowanie liczby pyłków z prognozy pogody może być poważnym problemem dla alergików, którzy potrzebują informacji, aby ustalić, czy mogą wyjść na zewnątrz, czy nie.,

wyświetl punkty przerwania zapytań o media w Chrome DevTools #

Po skonfigurowaniu punktów przerwania zapytań o media będziesz chciał zobaczyć,jak wygląda Twoja strona z nimi.Możesz zmienić rozmiar okna przeglądarki, aby wyzwalać punkty przerwania, ale Chrome DevTools ma wbudowaną funkcję, która ułatwia zobaczenie, jak wygląda strona w różnych punktach przerwania.

---