Kiedyś ci, którzy odwiedzali strony internetowe ze smartfonów i podobnych urządzeń mobilnych, powodowali tylko śmiech między innymi. Wielu po prostu nie mogło zrozumieć, dlaczego jest potrzebna, ponieważ istnieją takie wygodne stacjonarne komputery! Lub, co najgorsze, laptopy. Ponadto mobilny Internet był wtedy drogi. Czas minął. Internet jest tańszy. Coraz więcej telefonów i tabletów zostało sprzedanych. Po pewnym czasie właściciele popularnych witryn byli zaskoczeni, drapiąc się po głowach. Według statystyk okazało się, że ich zasoby są częściej odwiedzane ze smartfonów niż ze stacjonarnych komputerów!

W tym czasie witryny nie były zoptymalizowane pod kątem przeglądania na urządzeniach mobilnych. Po przyjściu do starego zasobu z telefonu, musisz być zadowolony z małych liter, małych elementów menu i niewygodnych przycisków.

Pojawienie się zapytań o media CSS

Konieczne było zaprojektowanie zasobów tak, aby wyglądały dobrze na każdym ekranie. Początkowo rozpowszechnianie praktyki tworzenia oddzielnych witryn dla każdego rozmiaru. Na przykład odwiedzający, który korzystał z telefonu komórkowego, wpadł w jeden zasób i taki, który "siedział" z jednego komputera na drugi. Było to jednak długie, kosztowne i niewygodne. Następnie pojawiły się zapytania mediów CSS3. Z ich pomocą prosta okazja do wdrożenia dynamicznego projektu.

Co to jest dynamiczny projekt?

Termin ten jest używany, jeśli wygląd zasobu jest różny w zależności od rozmiaru ekranu, na którym jest wyświetlany. W ten sposóbzrozumieć Wszystko jest proste. Wyobraź sobie, że masz stronę internetową. Menu nawigacji jest na górze. Poziomo. Rozciąga się na całą szerokość strony. Poniżej znajduje się blok z danymi kontaktowymi. Telefon i adres są również oddzielone dwoma blokami i znajdują się poziomo, blisko siebie. W tym bloku znajduje się główna treść, a pasek boczny znajduje się po lewej lub prawej stronie. Poniżej, jak zwykle, obuwie.


Jest to "klasyczny" układ elementów. Jest świetny na komputer osobisty, ale niezbyt przydatny w przypadku telefonów komórkowych. Menu horyzontalne jest zbyt szerokie. Kontakty są dalekie od siebie. Aby korzystać z informacji z paska bocznego i mieć w ogóle ekran przewijania, a nie wszyscy go lubią. Problem można rozwiązać za pomocą adaptacyjnego i mobilnego projektu za pomocą zapytań o media CSS3. Za pomocą kolejek mediów rekonstruujemy lokalizację treści, teraz wszystko działa tak:

na górze - blok z pionowym menu nawigacyjnym;

pod nim - blok ze stykami, które teraz są również umieszczone pionowo;

zawartość paska bocznego jest wyświetlana nie od strony zawartości tagu i NAD je.

Jest to najłatwiejszy przykład tego, co można zrobić za pomocą Responsive Web Design Media Queries. W rzeczywistości możliwości są znacznie większe.

Jakie są zatem pytania o media?

Pod pojęciem zapytań o media CSS moduł CSS3 służy do dostosowania treści strony do określonych warunków. Na przykład zaczyna reagować na rozmiar ekranu lub orientację urządzenia(książka /krajobraz). W jaki sposób system rozumie, co należy zrobić, aby zmienić treść? Aby to zrobić, użyj zapytań o media. Określają określone parametry. Jeśli urządzenie, z którego odwiedzający odwiedził witrynę, spełnia te parametry, zawiera wstępnie napisane style. Mogą być zapisane zarówno w tabeli ogólnej CSS, jak i w oddzielnym pliku.

Zgodność z CSS Media Queries z przeglądarkami

Wszystkie nowoczesne przeglądarki obsługują tę technikę, od Safari po Chrome. Oczywiście użytkownicy starszych wersji Internet Explorera będą mieli problemy, ale bądźmy szczerzy - dla tych, którzy wciąż używają starego IE, dosłownie wszystko może powodować problemy.

Składnia układu adaptacyjnego dla zapytań o media

Możliwe, że napotkano już zapytania o media podczas podłączania arkusza stylów do html. Zapamiętaj tę linię? Czasami do końca dodawano inną opcję, która wyglądała następująco: media = "screen". To jest połączenie z mediami! Oznacza to, że określony arkusz stylów będzie działał na urządzeniach wyposażonych w ekrany. Zamiast ekranu można określić drukowanie - w takim przypadku style plików mają zastosowanie, jeśli strona zostanie wydrukowana. Możesz użyć następujących atrybutów:

all - Domyślna opcja używana we wszystkich przypadkach;

scrteen - ekrany (komputery, laptopy, tablety, smartfony i wszystko, co jest wyposażone w wyświetlacz);

print - drukarki;

rzut - projektory;

przeglądarki mowy i języka;

Braille'a - dla urządzeńdla niedowidzących;

tv - do ekranów telewizyjnych.

To nie wszystko. Istnieje kilka dodatkowych atrybutów Media Query CSS, ale są one rzadko używane. Ponadto nie można określić domyślnej opcji włączania wszystkich.

Struktura zapytania o nośnik

Zamiast tworzyć plik stylu, można użyć kodu css. Wygląda to tak: @media ekran i (maksymalna szerokość: 1024px) {(będą style) Zgodnie z dyrektywą @media, która wyjaśnia, że ​​zostanie użyte zapytanie o media, pojawi się informacja o typie urządzenia (ekranie) i dodatkowych parametrach. Właściwość CSS Media Queries Max Width jest używana dla tego przykładu, co oznacza, że ​​nawiasy określone w tym stylu będą używane, jeśli rozmiar ekranu urządzenia użytkownika nie przekracza 1024 px. Ekran i są opcjonalne, możesz napisać:
@media (max-width: 1024px) {} W tym przypadku zostaną użyte właściwości

Zdefiniuj wiele parametrów

Załóżmy, że chcesz nieco ograniczyć zakres urządzeń, które będą używane w danym stylu. Załóżmy, że chcesz pokazać właściwości tylko tym, które są kto odwiedza Twoją witrynę ze smartfona, którego rozmiar ekranu jest nie mniejszy niż 320 pikseli, ale nie większy niż 500 pikseli. W takim przypadku zapytanie przyjmuje następującą formę: @media (min-width: 320px) i (max-width: 500px) {} Jeśli znasz programowanie, nj poznasz operatora i jest on używany. Dla tych, którzy nie wiedzą: sprawdza, czy te dwa warunki są prawdziwe. To jest aktywacja właściwościekran żądania musi mieć co najmniej 320 pikseli i nie więcej niż 500 pikseli. Liczba operatorów i nie jest ograniczona do jednego. Możesz umieścić je dokładnie tak, jak chcesz. Na przykład spróbuj utworzyć określone rozmiary ekranów smartfonów i zupełnie inaczej - dla telewizorów. Ważnym punktem jest orientacja urządzenia użytkownika. Ktoś przegląda witryny ze smartfona z orientacją pionową, osobą z krajobrazem. Do tego pierwszego potrzebujesz dodatkowej orientacji warunkowej: portretowej, dla innych odpowiednio orientacji: poziomej. Te wiersze są również wskazane w nawiasach za poleceniem @media. Możesz podzielić za pomocą i. Kolejny ciekawy niuans. Zamiast tego możesz użyć operatora lub. On potrzebuje, aby przynajmniej jeden warunek w zapytaniu był prawdziwy! Na przykład: @media (maksymalna szerokość: 500 pikseli) lub (orientacja: portret) {} Jeśli ekran ma mniej niż 500 pikseli LUB używa orientacji pionowej, style w nawiasach klamrowych zaczną działać.

słowo kluczowe nie dla bardziej subtelnego ustawienia

W zapytaniu o media można wstawić słowo nie. Robi się to jako: @media (nie max-szerokość: 700px) {} Właściwości są aktywowane, jeśli maksymalna szerokość nie wynosi 700 pikseli.

Funkcje mediów

W zapytaniach można używać wielu predefiniowanych funkcji. Sprawdź wszystkich w W3C. Większość planistów ma dość posiadania trzech głównych:

orientacji (już o tym rozmawialiśmy);

szerokość (szerokość, również wspomniano);

wysokość (wysokość).

Wysokość rzadko jest używana, ale jest ich kilkaprzypadki, w których to ustawienie może być przydatne.

Jak i gdzie umieścić zapytania?

Wiele robotów z jakiegoś powodu umieszcza je na samym końcu arkusza stylów. Na przykład główne style są wymienione na pierwszym miejscu, a następnie na dole dokumentu znajdują się zapytania. To nie jest zbyt dobre. O wiele wygodniej jest umieszczać właściwości dla różnych urządzeń zaraz po głównych stylach. Na przykład masz element div, który ma czerwony kolor czcionki: div {color: red; } Natychmiast po określeniu zapytania: @media (min-width: 320px) {} Piszemy właściwości. Takie podejście byłoby uciążliwe, gdyby używało "czystego" css. Preprocesorzy przychodzą na ratunek. Mają wiele ciekawych funkcji dla bardziej znaczących aplikacji. Inną opcją jest umieszczanie właściwości dla różnych urządzeń w różnych plikach stylów. Jest to szczególnie przydatne w przypadku korzystania z dyrektywy preprocesora importu. Rezultatem jest wygodny do edycji, czysty kod. Którą opcję użyć? Wszystko zależy od osobistych preferencji i cech zespołu. Być może w miejscu pracy zostanie zaakceptowany określony sposób umieszczania zapytań o media. Ponadto nie zapominaj, że możesz ułatwić sobie życie dzięki najnowszemu oprogramowaniu. Nie chodzi tylko o preprocesory. Dzięki zapytaniom o media CSS Gulp Group możesz znacznie ułatwić proces. Zalecamy opanowanie tego narzędzia lub dowolnego z jego analogów.