Jak napisać zapytanie o media CSS?

Poznaj składnię zapytań o media o minimalnej i maksymalnej szerokości

Responsywne projektowanie stron internetowych to podejście do budowania stron internetowych, gdzie strony te mogą dynamicznie zmieniać swój układ i wygląd na podstawie rozmiaru ekranu odwiedzającego . Duże ekrany otrzymują układ dopasowany do tych większych wyświetlaczy, podczas gdy mniejsze urządzenia, takie jak telefony komórkowe, otrzymują tę samą stronę internetową sformatowaną w sposób odpowiedni dla tego mniejszego ekranu. Takie podejście zapewnia lepsze wrażenia dla wszystkich użytkowników, a nawet może pomóc poprawić rankingi w wyszukiwarkach . Zapytania o media CSS stanowią ważną część responsywnego projektowania stron internetowych.

Zapytania o media są jak małe instrukcje warunkowe w pliku CSS Twojej witryny, umożliwiając ustawienie pewnych reguł CSS, które zaczną obowiązywać dopiero po spełnieniu określonego warunku – na przykład, gdy rozmiar ekranu jest powyżej lub poniżej określonych progów.

Kwerendy o media są teraz standardem, ale bardzo stare wersje programu Internet Explorer ich nie obsługują.

Zapytania dotyczące mediów w akcji

Zacznij od dobrze zorganizowanegoDokument HTMLwolne od wszelkich stylów wizualnych.

W pliku CSS dostosuj styl strony i ustaw linię bazową dla wyglądu witryny. Aby wyrenderować rozmiar czcionki strony do 16 pikseli, napisz to CSS :

|_+_|

Dodawanie większej liczby zapytań o media

Dodatkowo możesz dodać więcej zapytań o media dla każdego większego rozmiaru, wstawiając je do swojego arkusza stylów w następujący sposób:

|_+_|

Pierwsze zapytania o media mają szerokość 1000 pikseli, zmieniając rozmiar czcionki na 20 pikseli. Następnie, gdy przeglądarka przekroczy 1400 pikseli, rozmiar czcionki zmieni się ponownie na 24 piksele. Dodaj tyle zapytań o media, ile potrzeba dla Twojej witryny.

Minimalna szerokość i maksymalna szerokość

Zasadniczo istnieją dwa sposoby pisania zapytań o media — za pomocą minimalna szerokość lub z maksymalna szerokość . Do tej pory widzieliśmy w akcji minimalną szerokość. Takie podejście aktywuje zapytania o media, gdy przeglądarka osiągnie co najmniej tę minimalną szerokość. Więc zapytanie, które używa minimalna szerokość: 1000px ma zastosowanie, gdy przeglądarka ma co najmniej 1000 pikseli szerokości. Ten styl zapytania o media jest używany podczas tworzenia witryny z myślą o urządzeniach mobilnych.

Jeśli użyjesz maksymalna szerokość , działa w odwrotny sposób. Zapytanie o media o wartości „max-width: 1000px” ma zastosowanie, gdy rozmiar przeglądarki spadnie poniżej tego rozmiaru.