Elastyczne projektowanie stron

Te ćwiczenia z programowania są częścią kursu szkoleniowego „Tworzenie progresywnych aplikacji internetowych”, który został opracowany przez zespół Google Developers Training. Najwięcej korzyści przyniesie Ci ukończenie wszystkich ćwiczeń w kolejności.

Szczegółowe informacje o szkoleniu znajdziesz w omówieniu tworzenia progresywnych aplikacji internetowych.

Wprowadzenie

W tym module dowiesz się, jak dostosować styl treści w witrynie, aby była elastyczna.

Czego się nauczysz

  • Jak dostosować styl aplikacji, aby dobrze działała na różnych urządzeniach
  • Jak używać Flexboxa do łatwego rozmieszczania treści w kolumnach
  • Jak używać zapytań o media do reorganizacji treści w zależności od rozmiaru ekranu

Co warto wiedzieć

  • Podstawy HTML i CSS

Wymagania

  • Komputer z dostępem do terminala lub powłoki
  • Połączenie z internetem
  • Edytor tekstu

Pobierz lub sklonuj repozytorium pwa-training-labs z GitHub i w razie potrzeby zainstaluj wersję LTS Node.js.

Jeśli nie masz preferowanego lokalnego serwera deweloperskiego, zainstaluj pakiet Node.js http-server:

npm install http-server -g

Przejdź do katalogu responsive-design-lab/app/ i uruchom serwer:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

W dowolnej chwili możesz zamknąć serwer, klikając Ctrl-c.

Otwórz przeglądarkę i wejdź na stronę localhost:8080/.

Uwaga: wyrejestruj wszystkie skrypty service worker i wyczyść wszystkie ich pamięci podręczne na potrzeby hosta lokalnego, aby nie zakłócały działania modułu. W Narzędziach deweloperskich w Chrome możesz to zrobić, klikając Wyczyść dane witryny w sekcji Wyczyść pamięć na karcie Aplikacja.

Jeśli masz edytor tekstu, który umożliwia otwieranie projektów, otwórz folder responsive-design-lab/app/. Ułatwi Ci to zachowanie porządku. W przeciwnym razie otwórz folder w systemie plików komputera. W folderze app/ będziesz tworzyć laboratorium.

Ten folder zawiera:

  • index.html to główna strona HTML naszej przykładowej witryny lub aplikacji.
  • modernizr-custom.js to narzędzie do wykrywania funkcji, które upraszcza testowanie obsługi Flexboxa.
  • styles/main.css to kaskadowy arkusz stylów przykładowej witryny.

Wróć do aplikacji w przeglądarce. Spróbuj zmniejszyć szerokość okna do poniżej 500 pikseli i zobacz, że treść nie reaguje prawidłowo.

Otwórz narzędzia dla programistów i włącz tryb urządzenia w przeglądarce. Ten tryb symuluje działanie aplikacji na urządzeniu mobilnym. Zauważ, że strona jest pomniejszona, aby dopasować treści o stałej szerokości do ekranu. Nie jest to dobre rozwiązanie, ponieważ treści będą prawdopodobnie zbyt małe dla większości użytkowników, co zmusi ich do powiększania i przesuwania obrazu.

Zastąp TODO 3 w pliku index.html tym tagiem: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Zapisz plik. Odśwież stronę w przeglądarce i sprawdź ją w trybie urządzenia. Zwróć uwagę, że strona nie jest już pomniejszona, a skala treści jest taka sama jak na komputerze. Jeśli w emulatorze urządzenia treść zachowuje się w nieoczekiwany sposób, włącz i wyłącz tryb urządzenia, aby go zresetować.

Uwaga: emulacja urządzenia daje przybliżony obraz tego, jak witryna będzie wyglądać na urządzeniu mobilnym, ale aby uzyskać pełny obraz, zawsze warto przetestować witrynę na rzeczywistych urządzeniach. Więcej informacji o debugowaniu urządzeń z Androidem w Chrome i Firefox

Wyjaśnienie

Metatag viewport wskazuje przeglądarce, jak kontrolować wymiary i skalowanie strony. Właściwość width określa rozmiar widocznego obszaru. Można ją ustawić na konkretną liczbę pikseli (np. width=500) lub na wartość specjalną device-width,, która jest szerokością ekranu w pikselach CSS przy skali 100%. (Istnieją też odpowiednie wartości height i device-height, które mogą być przydatne w przypadku stron z elementami, których rozmiar lub położenie zmienia się w zależności od wysokości widocznego obszaru).

Właściwość initial-scale określa poziom powiększenia przy pierwszym wczytywaniu strony. Ustawienie początkowej skali poprawia komfort użytkowania, ale treść nadal wykracza poza krawędź ekranu. Naprawimy to w następnym kroku.

Więcej informacji

Zastąp TODO 4 w pliku styles/main.css tym kodem:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Zapisz plik. Wyłącz tryb urządzenia w przeglądarce i odśwież stronę. Spróbuj zmniejszyć szerokość okna. Zwróć uwagę, że przy określonej szerokości treść przełącza się na układ jednokolumnowy. Ponownie włącz tryb urządzenia i sprawdź, czy treść dopasowuje się do szerokości urządzenia.

Wyjaśnienie

Aby tekst był czytelny, używamy zapytania o media, gdy szerokość przeglądarki osiągnie 48 rem (768 pikseli przy domyślnym rozmiarze czcionki w przeglądarce lub 48-krotność domyślnego rozmiaru czcionki w przeglądarce użytkownika). Więcej informacji o tym, dlaczego jednostka rem jest dobrym wyborem w przypadku jednostek względnych, znajdziesz w artykule Kiedy używać jednostek em i rem. Gdy zostanie wywołane zapytanie o media, zmienimy układ z 3-kolumnowego na 1-kolumnowy, zmieniając width każdego z 3 div na wypełnienie strony.

Moduł układu elastycznego bloku (Flexbox) to przydatne i łatwe w użyciu narzędzie do tworzenia elastycznych treści. Flexbox pozwala nam osiągnąć ten sam efekt co w poprzednich krokach, ale zajmuje się obliczeniami odstępów i udostępnia wiele gotowych właściwości CSS do strukturyzowania treści.

Komentowanie istniejących reguł w CSS

Zmień w komentarz wszystkie reguły w styles/main.css, umieszczając je między znakami /* i */. W sekcji Flexbox jako progresywne ulepszenie podamy te reguły jako reguły rezerwowe na wypadek, gdyby Flexbox nie był obsługiwany.

Dodawanie układu Flexbox

Zastąp TODO 5.2 w pliku styles/main.css tym kodem:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Zapisz kod i odśwież stronę index.html w przeglądarce. Wyłącz tryb urządzenia w przeglądarce i odśwież stronę. Jeśli zwęzisz okno przeglądarki, kolumny staną się cieńsze, aż widoczna będzie tylko jedna z nich. W następnym ćwiczeniu naprawimy to za pomocą zapytań o media.

Wyjaśnienie

Pierwsza reguła definiuje container div jako kontener elastyczny. Włącza to kontekst flex dla wszystkich bezpośrednich elementów podrzędnych. Łączymy starą i nową składnię, aby uzyskać szerszą obsługę Flexboxa (więcej informacji znajdziesz w sekcji Więcej informacji).

Druga reguła używa klasy .col do utworzenia elementów podrzędnych flex o równej szerokości. Ustawienie pierwszego argumentu właściwości flex na 1 w przypadku wszystkich elementów div o klasie col powoduje równomierne podzielenie pozostałego miejsca między te elementy. Jest to wygodniejsze niż samodzielne obliczanie i ustawianie względnej szerokości.

Więcej informacji

Opcjonalnie: ustawianie różnych szerokości względnych

Użyj pseudoklasy nth-child, aby ustawić względną szerokość pierwszych dwóch kolumn na 1, a trzeciej na 1,5. Aby ustawić względne szerokości poszczególnych kolumn, musisz użyć właściwości flex. Na przykład selektor pierwszej kolumny wyglądałby tak:

.container .col:nth-child(1)

Używanie zapytań o media z Flexbox

Zastąp TODO 5.4 w styles/main.css tym kodem:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Zapisz kod i odśwież stronę index.html w przeglądarce. Jeśli teraz zmniejszysz szerokość przeglądarki, treści zostaną przeorganizowane w jedną kolumnę.

Wyjaśnienie

Gdy zostanie wywołane zapytanie o media, zmienimy układ z 3-kolumnowego na 1-kolumnowy, ustawiając właściwość flex-flow na column. Daje to taki sam efekt jak zapytanie o media dodane w kroku 5. Flexbox udostępnia wiele innych właściwości, takich jak flex-flow, które pozwalają łatwo strukturyzować, zmieniać kolejność i wyrównywać treści, aby dobrze reagowały w każdym kontekście.

Flexbox to stosunkowo nowa technologia, dlatego w CSS powinniśmy uwzględnić rozwiązania alternatywne.

Dodawanie Modernizr

Modernizr to narzędzie do wykrywania funkcji, które upraszcza testowanie obsługi Flexboxa.

Zastąp TODO 6.1 w pliku index.html kodem, który zawiera niestandardową kompilację Modernizr:

<script src="modernizr-custom.js"></script>

Wyjaśnienie

Na początku pliku index.html znajduje się kompilacja Modernizr, która sprawdza obsługę Flexboxa. Spowoduje to uruchomienie testu podczas wczytywania strony i dodanie klasy flexbox do elementu <html>, jeśli przeglądarka obsługuje Flexbox. W przeciwnym razie do elementu <html> dodaje klasę no-flexbox. W następnej sekcji dodamy te klasy do CSS.

Uwaga: gdybyśmy używali właściwości flex-wrap Flexboxa, musielibyśmy dodać osobny detektor Modernizr tylko dla tej funkcji. Starsze wersje niektórych przeglądarek częściowo obsługują Flexbox i nie zawierają tej funkcji.

Stopniowe używanie Flexbox

Użyjmy klas flexbox i no-flexbox w CSS, aby zapewnić reguły zastępcze, gdy Flexbox nie jest obsługiwany.

Teraz w styles/main.css dodaj .no-flexbox przed każdą regułą, którą oznaczyliśmy jako komentarz:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

W tym samym pliku dodaj znak .flexbox przed pozostałymi regułami:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Jeśli wykonasz opcjonalny krok 5.3, pamiętaj, aby dodać .flexbox do reguł poszczególnych kolumn.

Zapisz kod i odśwież index.html w przeglądarce. Strona powinna wyglądać tak samo jak wcześniej, ale teraz działa dobrze w każdej przeglądarce na dowolnym urządzeniu. Jeśli masz przeglądarkę, która nie obsługuje Flexboxa, możesz przetestować reguły rezerwowe, otwierając index.html w tej przeglądarce.

Więcej informacji

Wiesz już, jak dostosować styl treści, aby były elastyczne. Za pomocą zapytań o media możesz zmieniać układ treści w zależności od rozmiaru okna lub ekranu urządzenia użytkownika.

Omówione zagadnienia

  • Ustawianie wizualnego widocznego obszaru
  • Flexbox
  • Zapytania o multimedia

Zasoby

Więcej informacji o podstawach elastycznego projektowania

Więcej informacji o Flexbox jako ulepszeniu progresywnym

Więcej informacji o bibliotekach elastycznego CSS

Więcej informacji o używaniu zapytań o media

Aby zobaczyć wszystkie codelaby w ramach szkolenia PWA, zapoznaj się z codelabem wprowadzającym.