Podstawy kodowania responsywnych stron
Last updated
Was this helpful?
Last updated
Was this helpful?
W dzisiejszych czasach przeglądamy Internet nie tylko siedząc w domu przed biurkiem, ale też korzystając ze smartfona jadąc autobusem, spoglądając na smartwatcha albo przesuwając palcem po tablecie. Mnogość typów urządzeń, ich rozdzielczości wydaje się oszałamiająca i sprawia wrażenie, że zaprojektowanie i zakodowanie strony, która będzie się na każdym prawidłowo wyświetlać, wydaje się niewykonalne.
Bardzo ważne jest zatem, aby już na etapie projektowania, a także później kodowania, zadbać o to, aby strona była responsywna. Termin Responsive Web Design . Od tamtej pory zgromadzono całkiem spory zasób wiedzy na temat tego, jak dostosowywać strony do wyświetlania za pomocą różnych mediów.
Niestety, wyjaśnienie wszystkiego dogłębnie spowodowałoby, że objętość tego tutoriala podwoiłaby się, a wraz z nią i czas trwania naszego kursu. Zapoznajmy się zatem z podstawami kodowania responsywnych stron i dowiedzmy się, czym są media queries.
Upewnij się, że w nagłówku pliku HTML () znajduje się poniższy kod:
Właściwość width
określa domyślną szerokość strony. Moglibyśmy wstępnie ustawić ją w pikselach, np. width=800
, jednak jak można się domyślić nie prezentowałaby się najlepiej na urządzeniach o szerokości ekranu różnej od 800 pikseli. Wartość device-width
oznacza tyle, że szerokość naszej strony ma dostosować się do szerokości wyświetlacza.
Właściwość initial-scale=1
mówi przeglądarce, że tuż po załadowaniu strona powinna pokazać się bez powiększenia (zoom), w swojej naturalnej wielkości.
Po zapoznaniu się z siatką zapewne zaczęliście się zastanawiać, jak to się dzieje, że elementy siatki mogą przyjmować różne szerokości dla różnych szerokości ekranu. Niektórzy z Was pewnie zajrzeli do kodu źródłowego i dostrzegli zagadkowe @media
.
Reguła @media
umożliwia nam serwowanie różnych wartości stylów w zależności od medium, na jakim wyświetlana jest strona. Możemy zastosować tę regułę również dla wydruku strony, ale nie tylko – .
Istotne jest, aby wewnątrz nawiasów @media { }
zawrzeć nie tylko same właściwości, ale całe deklaracje stylów, łącznie z selektorami.
W projektowaniu stron dość popularne jest podejście mobile first, czyli skupienie się w pierwszej kolejności na layoucie dla małych ekranów mobilnych urządzeń. Małe ekrany oznaczają mniej dostępnej przestrzeni i jednocześnie więcej ograniczeń dla projektanta lub programisty stron.
W kodzie CSS oznacza to zaczęcie kodowania globalnych stylów od tych, które będą działać dla urządzeń o małych ekranach i zawężanie zakresu stylów potrzebnych dla urządzeń o większych ekranach za pomocą media query z min-width
. W praktyce często oznacza to mniej napisanego kodu.