Medyazaprosы zostały wprowadzone w specyfikacji CSS3 decydując stary ból głowy web-deweloperów: rodzimy style CSS kontroli, w zależności od specyfikacji danego urządzenia i płynną zmianę stylu podczas zmiany rozmiaru okna przeglądarki.
Medyazaprosы w CSS: adaptyv 5 minut
W prostych słowach, medyazapros - strukturę, która pozwala, w zależności od pewnych warunków, aby wybrać styl do wykorzystania na stronie. Na przykład, jeśli szerokość okna przeglądarki niż 1024px, pokażemy pełne menu rastyahyvayuscheesya całej szerokości strony, a jeśli mniej niż 1024px - ukryć go (na przykład za pomocą wyświetlacza własności: none;) i pokazać zamiast „Menu burger” po kliknięciu co pokazuje wyrafinowaną listę (display: block;)
Najłatwiejsze żądanie CSS w mediach wyglądałoby następująco: .menu {display: block;}
.burger-menu {display: none;} @all mediów oraz (max-width: 1024px) {.menu {display: none;} .burger-menu {display: block;}} mogą być odczytywane dosłownie jak my zawsze pokazać i ukryć standardowego menu „menu burger”, ale jeśli szerokość przeglądarce najmniej 1024 pikseli (max-width: 1024px oznacza „maksymalnej szerokości 1024px»), możemy ukryć stare menu i nowy show. Właściwości zapytań o media będą prawidłowe. To będzie działać zarówno na stronach otwarcie telefonu komórkowego lub tabletu z gładkiej i zmniejszenie okna przeglądarki, jeśli przekształcić go w oknie vhopymosya na bok i wyciągnąć poprzez zmniejszenie jego rozmiaru.
W przybliżeniu taki wniosek może wyglądaćw edytorze:
Jeśli masz krótki przegląd zapytań o media w CSS, możesz bezpiecznie ćwiczyć i testować ich wydajność w swojej witrynie, instalując na niej zapytania o media CSS. Urządzenia mobilne z łatwością rozpoznają nowe style, chyba że zapomnisz podać metatag z rzutni, który omówimy bardziej szczegółowo poniżej. Zalecamy jednak, abyś przeczytał więcej o ich właściwościach, dowiedział się o obsłudze przeglądarek, najpierw rozważ mobilne urządzenia i komputery.
Wsparcie dla zapytań o media
Być może to pytanie jest kluczowe dla tych, którzy poważnie myślą o odwiedzających ich stronę i starają się, aby były one powszechnie dostępne dla wszystkich. Na szczęście medyazaprosы już dobrze obsługiwane i działa dobrze w nowoczesnych przeglądarkach, począwszy od najbardziej problematycznego Safari 4 i Internet Explorer 9. Jeśli to konieczne, aby utrzymać Internet Explorer 8, można podłączyć do popularnego skryptu lub respond.js CSS3-mediaqueries.js .
Ustaw prawidłową mediów CSS komórkowego
, aby wszystko działało jak powinno, ważne jest, aby pamiętać, aby ustawić tytuł dokumentu tag rzutni. Odbywa się to w następujący sposób: Tak więc, na urządzeniach mobilnych o dużej gęstości pikseli, zostanie ustalona prawidłowa relacja między określonym CSS i rzeczywistą liczbą pikseli, a Twoja strona zostanie przeskalowana. I nie ma już pytania, dlaczego media nie działają, gdy CSS jest pomniejszany.
Dobra zdolność dostosowywania
Głównym zadaniem zapytań o media jest uczynienie witryny adaptatywną, to znaczy "nauczenie" jej automatycznego dostosowywania się dodowolne formaty i rozmiary ekranu. Możesz to zrobić na dwa sposoby. Zaznaczanie zapytań o media CSS za pomocą kluczowych punktów, które najczęściej odnoszą się do popularnych formatów urządzeń. Na przykład najłatwiejszą opcją jest: 320px - telefony, 768px - tablety, 1024px i wyższe - laptopy i komputery osobiste. I w każdym z tych punktów zmień stały rozmiar bloków (jak również wszelkie inne obiekty, takie jak wideo lub obraz). Drugi sposób to sprawne, "gumowe" przejście między kilkoma punktami, ustawienie elementów strony nie jako sztywnych wymiarów w pikselach, ale wartości procentowe. W tym przypadku, na przykład, 1024px i wyżej, pasek menu zajmie 50% strony, płynnie z wielkością okna przeglądarki do 768px, a następnie - rozciągnie się do wszystkich 100% okna przeglądarki.
Warto również wspomnieć o telefonie komórkowym jako pierwszym i pierwszym na komputerze, różniącym się podejściem do zapytań budowlanych. W pierwszym przypadku najpierw opiszemy zasady dla wszystkich urządzeń, w tym laptopów, komputerów osobistych, a następnie stopniowo tworzymy witrynę i usuwamy dodatkowe elementy strony. W drugim - najpierw przygotowujemy układ strony na urządzenia mobilne, a następnie rozszerzając okno przeglądarki i pojawienie się wolnego miejsca, umieszczamy w nich zawartość.
Trick from the wizard: wskaż media css - zasady w linku do tagu!
Niewiele osób wie, ale niekoniecznie zapisuje zapytania bezpośrednio w stylach CSS, możesz je określić bezpośrednio podczas łączenia pliku bezpośrednio w tagu. Plik zostanie połączony w zależności od tego, czy strona spełnia kryteria określone w tej właściwościmedia Możesz użyć tej samej metody podczas importowania stylów z innych plików przy użyciu @import. Podsumowując, należy zauważyć, że wiele popularnych bibliotek wykorzystywanych przy tworzeniu stron zawierających wbudowane analogi zapytań o media. Nie należy ich lekceważyć. Na przykład Bootstrap umożliwia subskrybowanie klas klas HTML, dzięki czemu bloki będą automatycznie dostosowywać się podczas zmiany rozmiaru ekranu, ale nie będzie można elastycznie kontrolować tego procesu, a strona zawsze będzie sztywno podzielona na 12 kolumn. Wszakże tylko za ich pomocą możesz stworzyć stronę, która będzie maksymalnie elastyczna, aby dostosować się do każdego urządzenia, będąc całkowicie pod Twoją kontrolą.