Kilka lat temu stosunkowo łatwo było zaprojektować i zbudować strony internetowe. Strony internetowe były prostsze i były przeglądane na komputerach stacjonarnych i laptopach o niewielkich różnicach w rozmiarach ekranu. Dzisiaj, gdy urządzenia mobilne przejmują kontrolę nad przeglądaniem, strona internetowa może być wyświetlana na ekranie smartfona o przekątnej 4,8 cala, tabletce 5 ", tablecie 7" lub dowolnym rozmiarze pośrednim.
Jak więc upewnić się, że witryna wyświetla się poprawnie na różnych typach urządzeń i rozmiarach ekranu?
Rozwiązanie zostało po raz pierwszy zaproponowane przez Ethan Marcotte, kiedy badał sposoby na to, by projekty stron internetowych były responsywne, tzn. aby zmieniały się zgodnie z rozmiarem ekranu. Responsywny projekt strony to taki, który inteligentnie wykorzystuje CSS, aby zapewnić, że strony internetowe będą renderować się w szerokim zakresie rozmiarów ekranu - bez uciekania się do przekierowania adresu URL lub dynamicznego udostępniania różnych kodów HTML i CSS, w zależności od UserAgent. To nie jest tak naprawdę technologia czy standard, ale raczej zbiór zasad projektowania, które pomagają osiągnąć rezultat.
W ciągu ostatnich kilku lat powstało wiele responsywnych szablonów, frameworków CSS i motywów WordPress. Możliwe jest na przykład stworzenie responsywnej strony internetowej w WordPress bez napisania pojedynczej linii kodu.
Ale prawdziwy projektant stron internetowych nie jest zadowolony z używania szablonów. Będzie starała się zrozumieć elementy responsywnego projektowania stron internetowych, aby móc z nich efektywnie korzystać.
Dlatego dzisiaj przyjrzymy się trzem podstawowym technikom, które musisz opanować, abyś był skutecznym responsywnym projektantem.
Zapytania o media umożliwiają projektowanie różnych układów dla różnych typów mediów, takich jak ekran, druk, telewizja, urządzenia przenośne itp. W zależności od rodzaju nośnika można skonfigurować styl, czcionkę i inne elementy strony.
Wprowadzone w CSS3 zapytania o media pozwalają projektantowi dostosować prezentację treści do konkretnego zakresu typów urządzeń wyjściowych. Składają się z deklaracji typu mediów i jednego lub więcej wyrażeń funkcji medialnej, które oceniają prawdę lub fałsz.
Dostępne są następujące typy multimediów: podręczny, ekranowy, tv, drukowany i projekcyjny. Funkcje multimedialne obejmują między innymi wysokość, szerokość, format obrazu, rozdzielczość, indeks kolorów oraz wysokość i szerokość okna przeglądarki.
Weźmy prosty przykład; wyobraź sobie, że chcesz zmniejszyć rozmiar tekstu na mniejszych urządzeniach, takich jak telefony. Zapytanie o to mogłoby wyglądać mniej więcej tak:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Teraz rozmiar czcionki twoich akapitów zostanie ustawiony na 1em, chyba że szerokość przeglądarki jest mniejsza niż 400 pikseli, w takim przypadku zmniejszy się do 0.8em.
Z mojego doświadczenia wynika, że najlepszym sposobem zaprojektowania układu responsywnego jest najpierw utworzenie domyślnego arkusza stylu głównego z głównymi elementami strukturalnymi. Następnie możesz dodać zapytania o media, aby dostosować elementy na podstawie układu lub innych elementów urządzenia. Jeśli jest to więcej niż garść reguł, lepiej byłoby przenieść je na oddzielny arkusz podrzędny - który można później selektywnie załadować. Oto, jak to działałoby:
Ten fragment kodu sprawdza, czy urządzenie jest przenośne w trybie poziomym o szerokości mniejszej niż 720 pikseli, a jeśli tak, ładuje arkusz stylów tablet_layout.css .
Zwróć uwagę, że funkcje szerokość, wysokość, szerokość min / maks, min / maks wysokość odnoszą się do szerokości i wysokości okna przeglądarki. Szerokość i wysokość urządzenia są kontrolowane przez szerokość urządzenia, wysokość urządzenia, min / max-szerokość urządzenia, min / max- wysokość urządzenia . Jeśli chcesz spojrzeć w górę więcej przykładów przy użyciu zapytań o media MDN ma dobry podsumowanie.
"Płynna siatka" to termin używany do opisania układu, który jest kodowany we względnych proporcjach różnych elementów, a nie przy stałych wartościach pikseli.
Tradycyjne układy CSS wykorzystywały siatki o stałej szerokości do pozycjonowania elementów. Podejście o stałej szerokości już dziś nie działa, ponieważ mamy ekrany urządzeń od 3 cali do kilku stóp. W projekcie z płynną siatką wszystko jest kodowane pod względem względnej proporcji do elementu podstawowego, tj. Zamiast określać wysokość i szerokość każdego elementu; podano procent lub względną wielkość.
Wyobraź sobie, że masz cztery kolumny. Aby ten płyn był płynny, zamiast określać każdy z nich jako 200-pikselowy, należy określić je jako 0.2083% (tj. Jako 200/960). Przynajmniej taka jest zasada. Tworzenie całkowicie płynnej siatki wymaga dużej ostrożności. Jest to jeden z tych rzadkich przypadków, w których wolałbym polecać używanie niestandardowych narzędzi. Tiny Fluid Grid , Zmienny system siatki i Fluid Baseline Grid są świetną alternatywą dla pisania własnej siatki płynów od zera.
Obrazy są uważane za elastyczne, gdy obraz jest renderowany w rozmiarze natywnym, o ile kontener HTML go obsługuje, ale gdy okno przeglądarki się skurczy, obraz skaluje się, aby go dopasować.
Nawet jeśli reszta projektu jest płynna i responsywna, nie będzie się dobrze wyświetlać, jeśli wszystkie komponenty nie będą skalowane. Może to być trudne z obrazami i filmami. Obraz o szerokości 700 pikseli będzie dobrze wyglądać na pulpicie, ale zostanie odcięty, gdy zostanie wyświetlony na tablecie o rozdzielczości 320 pikseli. Większość nowoczesnych responsywnych projektów używa właściwości CSS max-width do skalowania obrazów. (Ta metoda była pierwszy zaproponowany przez Richarda Butlera .)
img {max-width: 100%;}Te kilka linii zapewni, że obraz nie zostanie odcięty, ustawiając maksymalną szerokość obrazu na 100% kontenera. Jeśli okno przeglądarki lub ekran ulegną zmniejszeniu, ten fragment kodu CSS spowoduje proporcjonalne zmniejszenie obrazu. Wysokość jest regulowana automatycznie, przy zachowaniu proporcji obrazu.
Zamiast tego możesz zablokować obraz tak, aby zajmował określoną pionową proporcję ekranu
img {max-height: 75%;}(Upewnij się, że nie używasz jednocześnie właściwości max-height i max-width ).
Rozmiar obrazu można również powiązać z rozmiarem tekstu zamiast elementu nadrzędnego za pomocą em , na przykład:
img {width: 30em;}Jeśli obraz zawiera tekst, możesz ograniczyć minimalny / maksymalny rozmiar, aby tekst był czytelny. Możesz określić to tak:
img {width: 30em;max-width: 500px;min-width: 100px;}Do skalowania filmów można użyć tych samych technik, na przykład:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Responsywny design to przyszłość naszej branży, ale przy tak wielu różnych technikach latania, często trudno jest nadążyć. Opanuj te 3 proste techniki, a będziesz 90% drogi do bycia responsywnym projektantem.
Wyróżniony obraz / miniatura, elastyczny obraz przez Shutterstock.