Zbuduj responsywną witrynę w tydzień: zapytania o media (część 4)

Zawartość

• 01. Dodawanie zapytań o media
• 02. Anatomia zapytania o media
• 03. Jeszcze jedno…
• 04. Wybór punktów przerwania
• 05. Dostosowywanie naszych miniatur
• 06. Nie tylko szerokość

• Potrzebna wiedza: Średniozaawansowany CSS i HTML
• Wymaga: Edytor tekstu, nowoczesna przeglądarka, oprogramowanie graficzne
• Czas projektu: 1 godzina (łącznie 5 godzin)
• Plik wsparcia

Zapytania o media, stosunkowo nowa część specyfikacji CSS, są niewątpliwie najbardziej ekscytującym aspektem projektowania responsywnych witryn internetowych i obszarem przygotowanym do dalszych eksperymentów.

Po zaakceptowaniu potrzeby układów adaptacyjnych niektórzy postrzegali zapytania o media jako sposób na modernizację układów adaptacyjnych w istniejących witrynach o stałej szerokości. Wśród tych, którzy przyjęli elastyczne układy, wielu zrobiło to z perspektywy pulpitu, ukrywając zawartość i funkcje w miarę zawężania się widoku.

W tym samouczku przyjęliśmy alternatywne podejście, przede wszystkim mobilne. Teraz, gdy staramy się uwzględnić zapytania o media, możemy się nad tym zastanowić dodanie funkcje wraz ze wzrostem powierzchni ekranu, mając pewność, że znaczniki i projekt, na których opiera się nasza witryna, stanowią wiarygodną podstawę.

Dzisiaj wyjdziemy poza nasze portfolio wzorów i stworzymy indywidualne strony wymagane dla naszej witryny. W ten sposób zobaczymy, jak konstruowane są zapytania o media, i zaimplementujemy je w prawdziwie responsywny sposób.

01. Dodawanie zapytań o media

Ponieważ komponenty z naszego portfolio wzorców są kompletne i działają poza granicami dowolnego układu, nadszedł czas, aby przenieść je na różne strony tworzące naszą witrynę.

Zaczniemy od naszej strony głównej. Z projektu zorientowanego na komputery widać, że w szerszych rzutniach nasz układ powinien wyglądać następująco:

Wykonując pomiary z naszego projektu, możemy opisać obszar dokumentu w CSS w następujący sposób:

.document {
wypełnienie: 0,5%;
}
.Główny {
szerokość: 74,242424242424%; / * 784/1056 * /
float: left;
}
.uzupełniający {
szerokość: 22,727272727273%; / * 240/1056 * /
float: right;
}

Jak dowiedzieliśmy się z drugiej części tego samouczka, do obliczenia procentowej szerokości tych kolumn używamy następującego wzoru:

(cel / kontekst) * 100 = wynik

Kiedy zmienimy rozmiar naszej przeglądarki, zobaczymy, że nasz układ pulpitu skaluje się od ekranu o najmniejszym rozmiarze do największego. Oczywiście przy małych rozmiarach kolumny są zbyt wąskie, a długość linii tak krótka, że ​​treść jest trudna do odczytania. Chcemy tego układu tylko wtedy, gdy jest wystarczająco dużo miejsca, aby mógł działać.

W tym miejscu pojawiają się zapytania o media. Zakładając, że ten układ powinien działać tylko wtedy, gdy przeglądarka jest szersza niż 768px, możemy dodać następujący CSS:

.document {
wypełnienie: 0,5%;
}
@ media screen i (min-width: 768px) {
.Główny {
szerokość: 74,242424242424%; / * 784/1056 * /
float: left;
}
.uzupełniający {
szerokość: 22,727272727273%; / * 240/1056 * /
float: right;
}
}

Teraz, gdy widoczny obszar jest węższy niż 768 pikseli, wszystko w zapytaniu o media zostanie zignorowane. Zostanie zignorowany przez każdą przeglądarkę, która również nie obsługuje zapytań o media.

02. Anatomia zapytania o media

Aby zrozumieć, co się tutaj dzieje, przyjrzyjmy się, jak konstruowane jest zapytanie o media. Możemy podzielić to na dwie części:

• Ekran @media: Pierwsza część zapytania o media to typ mediów. Możesz rozpoznać tę składnię, jeśli kiedykolwiek zawarłeś style drukowania w swoim CSS. Możesz również rozpoznać nazwę typu z pliku głoska bezdźwięczna atrybut w link> element. Dzieje się tak, ponieważ obie strony akceptują zatwierdzony zestaw typów mediów, które można znaleźć w specyfikacji CSS 2.1.
• (min-szerokość: 768px): Druga część to pytanie. Obejmuje to funkcja do zapytania (w tym przypadku minimalna szerokość rzutni) i odpowiednie wartość do przetestowania pod kątem (768px).

Kiedy mówimy o responsywnym projektowaniu stron internetowych, istnieje tendencja do skupiania się na szerokości, ale są też inne funkcje, które możemy przetestować:

• (min- | max-) szerokość i (min- | max-) wysokość: Dzięki temu możemy zapytać o szerokość i wysokość widocznego obszaru (tj. Okna przeglądarki).
• (min- | max-) device-width i (min- | max-) wysokość urządzenia: Dzięki temu możemy zapytać o szerokość całego wyświetlacza. Z mojego doświadczenia wynika, że ​​zwykle rozsądniej jest oprzeć układy na rzutni, a nie na wyświetlaczu.
• orientacja: Możesz od razu pomyśleć o możliwościach tutaj; pomyśl o aplikacjach, które wyświetlają różne treści w zależności od orientacji telefonu - to samo jest możliwe w Internecie.
• (min- | max-) współczynnik kształtu: To pozwala nam dostosowywać układy na podstawie proporcji okna przeglądarki…
• (min- | max-) współczynnik proporcji urządzenia: … A to pozwala nam zrobić to samo w oparciu o proporcje urządzenia. Owen Gregory napisał w zeszłym roku wspaniały artykuł, w którym zbadał, w jaki sposób możemy użyć tego zapytania, aby powiązać nasze projekty z urządzeniami, na których się pojawiają.
• (min- | max-) monochromatyczny: Możemy też sprawdzić, czy urządzenie ma wyświetlacz monochromatyczny, czy nie. Wyobraź sobie, jak przydatne byłoby to, gdyby urządzenia Amazon Kindle z e-atramentem nie kłamały i nie zgłaszały swoich ekranów jako kolorowych!

Ostatnia część naszego zapytania jest prawdopodobnie najbardziej przydatna. Używając i, możemy przetestować wiele funkcji w jednym zapytaniu. Na przykład:

@ media screen i (min-width: 768px) i (orientacja: pozioma) {
...
}

Jak widać, zapytania o media mogą nam pomóc w tworzeniu dość atrakcyjnych doświadczeń - a ja tylko dotknąłem powierzchni. Jeśli szukasz lekkiej lektury przed snem, możesz zrobić coś gorszego niż przeczytanie specyfikacji zapytania o media W3C, która opisuje wszystkie funkcje, które możemy przetestować.

03. Jeszcze jedno…

Mimo że umieściliśmy zapytania o media w naszym CSS, jeśli przeglądamy naszą witrynę na urządzeniu mobilnym, zauważysz, że nasza witryna jest nadal renderowana tak, jakby wyświetlacz był szerszy niż 768px.

Aby zrozumieć, dlaczego tak się dzieje, musimy wziąć krótką lekcję historii.

Kiedy w 2007 roku zaprezentowano oryginalny iPhone, jednym z jego głównych punktów sprzedaży była możliwość przeglądania „prawdziwej sieci”, nawet jeśli oznaczało to witryny o stałej szerokości przeznaczone dla komputerów stacjonarnych, które musiały zostać ściśnięte, aby zmieściły się na małym ekranie. IPhone był w stanie to zrobić, zgłaszając, że jego wyświetlacz ma szerokość 980 pikseli, a następnie przeskalował strony internetowe w celu dopasowania do ekranu o szerokości 320 pikseli.

Ale iPhone został wprowadzony przed pojawieniem się responsywnego projektowania. Teraz, gdy autorzy projektują witryny przeznaczone na urządzenia mobilne, ta funkcja jest mniej przydatna. Na szczęście firma Apple zastosowała sposób obejścia tego zachowania, a odkąd została przyjęta przez innych producentów, stała się prawie de facto standard. Po prostu polega na dodaniu pojedynczego pliku meta element do naszego znacznika:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

To mówi przeglądarkom obsługującym rzutnie, że strona internetowa nie powinna być zmniejszana i że szerokość okna przeglądarki powinna być traktowana tak samo, jak całkowita szerokość urządzenia. Po dodaniu tej linii nasza witryna pojawi się w zamierzonym układzie:

04. Wybór punktów przerwania

Wróćmy do naszego zapytania o media:

@ media screen i (min-width: 768px) {
...
}

Wartości, do których dostosowuje się układ, są powszechnie nazywane punktami przerwania. Jeśli pamiętacie, w części drugiej powiedziałem, że używanie pikseli jest oznaką braku reakcji na myślenie, ale tutaj wybrałem 768px, prawdopodobnie dlatego, że jest to szerokość znanego urządzenia.

Zamiast wybierać punkty przerwania na podstawie cech popularnych urządzeń, skuteczniejsze może być przyjrzenie się wartościom pochodzącym z naszych treści, na przykład wygodnym długościom linii do czytania lub maksymalnym rozmiarom obrazu.

Ponieważ nasz typ jest określany za pomocą em, wydaje się rozsądne, aby nasze zapytania o media również używały em. W rzeczywistości ma to dodatkową korzyść. Gdy użytkownik zmieni rozmiar tekstu w przeglądarce, strony dostosują się do mniejszych punktów przerwania. Nasza witryna dostosuje się nie tylko w zależności od rozmiaru widocznego obszaru, ale także rozmiaru czcionki. W rzeczywistości dopiero wtedy, gdy zobaczyłem, jak Jeremy Keith demonstruje zapytania medialne oparte na em, zdałem sobie sprawę, jak potężne mogą być.

Chociaż nasz projekt może wskazywać na możliwe punkty przerwania, często najlepszym sposobem ich wyboru jest eksperymentowanie. Dostosowując szerokość okna przeglądarki, zdecydowałem, że 800px to dobra szerokość do przełączenia na bardziej złożony układ.

Jak jednak wyrażamy 800px w emach? Znowu możemy użyć naszej formuły, ale jaki jest kontekst? Podczas obliczania ems dla zapytań o media kontekstem jest zawsze domyślny rozmiar czcionki przeglądarki niezależnie od tego, czy ta wartość została zastąpiona w Twoim CSS. Ta wartość domyślna to zazwyczaj 16 pikseli, co daje nam:

800 / 16 = 50

Możemy teraz zaktualizować nasze zapytanie o media w następujący sposób:

@ media screen i (min-width: 50em) {/ * 800px * /
...
}

05. Dostosowywanie naszych miniatur

Będziesz pamiętać, że w części 2 stylizowaliśmy nasze miniatury tak, aby były responsywne. Jednak gdy obrazy w tych miniaturach osiągną pełną szerokość, po prawej stronie każdego obrazu pojawia się biały obszar. Ponownie, zapytania o media pozwalają nam to naprawić.

Oto nasz oryginalny CSS:

ol.media li.media-item {
background-color: #fff;
marża: 0 4,16666666667% 4,16666666667% 0;
szerokość: 47,91666666667%;
float: left;
}
ol.media li.media-item: nth-child (2n) {
margin-right: 0;
}

Punkt, w którym pojawia się ta biała przestrzeń, jest taki sam, jak szerokość przeglądarki szerszej niż 560px.Wybierzemy tę wartość, przy której zamienimy się na wyświetlanie trzech miniatur w każdym wierszu. Możemy to zrobić, dodając następujący CSS:

@ media screen i (min-width: 35em) {
.media-item {
szerokość: 30,612244897959%; / * 240/784 * /
marża: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margin-right: 0;
}
}

Zwróć uwagę, że nie musimy przepisać wszystkich stylów wymaganych dla miniatury w tym zapytaniu o media, tylko części, które chcemy dostosować.

Przeglądając tę ​​zmianę w przeglądarce, zauważysz, że po prawej stronie co drugiej miniatury nie ma marginesu. Dzieje się tak, ponieważ następująca reguła CSS pozostaje aktywna:

ol.media li.media-item: nth-child (2n) {
margin-right: 0;
}

Musimy zmodyfikować CSS w naszym zapytaniu o media, aby zresetować tę wartość:

@ media screen i (min-width: 35em) {
.media-item {
szerokość: 30,612244897959%; / * 240/784 * /
marża: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margin-right: 4,081632653061%;
}
.media-item: nth-child (3n) {
margin-right: 0;
}
}

Tworząc zapytania o media, zawsze pamiętaj o takich problemach z dziedziczeniem.

06. Nie tylko szerokość

Ważne jest, aby myśleć o zapytaniach o media nie tylko w kategoriach szerokości, ale także innych zmiennych. Na przykład wideo na naszej stronie z elementami multimedialnymi jest częściowo ukryte, gdy zmniejsza się wysokość widocznego obszaru. Mamy technologię:

.media-object-wrapper {
wyściółka na dole: 56,25%;
szerokość: 100%;
wysokość: 0;
pozycja: względna;
}
Ekran @ media i (max-height: 35em) i (orientacja: pozioma) {/ * 560px * /
.media-object-wrapper {
szerokość: 60%;
wyściółka na dole: 33,75%;
}
}

Dołączyłem nawet zapytanie o orientację, aby jeszcze bardziej wyrafinować to zachowanie.

Możemy zastosować podobne podejście do innych części naszego projektu, zamieniając większą wersję nagłówka i przenosząc linki nawigacyjne na górę strony, gdy tylko będzie dostępne miejsce.

• Zobacz naszą responsywną stronę główną
• Zobacz naszą responsywną stronę z elementami multimedialnymi

Mamy to! Stworzyliśmy responsywną stronę internetową - i mamy dzień do stracenia! Cóż, niezupełnie. Elastyczne układy, obrazy i zapytania o media to dopiero początek procesu projektowania responsywnego.

Jutro: W końcowej części tego samouczka wyjdziemy poza projektowanie responsywnych witryn internetowych i przyjrzymy się, jak możemy tworzyć naprawdę responsywne witryny internetowe.

Paul jest projektantem interakcji z Brighton w Anglii. Jest najszczęśliwszy, gdy tworzy proste, ale angażujące interfejsy, które są natywne dla sieci.