Jak napisać zapytanie o media CSS?

@media screen i (min-szerokość: 1000px) { }

To jest składnia zapytania o media. Zaczyna się od @głoska bezdźwięczna w celu ustanowienia samego zapytania o media. Następnie ustaw typ nośnika, którym w tym przypadku jest ekran. Ten typ dotyczy ekranów komputerów stacjonarnych, tabletów, telefonów itp. Zakończ zapytanie o media za pomocą funkcja mediów. W naszym przykładzie powyżej, to jest średnia szerokość: 1000px. Oznacza to, że zapytanie o media uruchamia się w przypadku wyświetlaczy o minimalnej szerokości 1000 pikseli.

Po tych elementach zapytania o media dodaj otwierający i zamykający nawias klamrowy podobny do tego, co robisz w każdej normalnej regule CSS.

Ostatnim krokiem do zapytania o media jest dodanie reguł CSS, które będą stosowane po spełnieniu tego warunku. Wstaw te reguły CSS w nawiasy klamrowe tworzące zapytanie o media, tak jak poniżej:

 @media screen and (min-width: 1000px) { body { font-size: 20px; }

Gdy warunki zapytania o media są spełnione (okno przeglądarki ma co najmniej 1000 pikseli szerokości), ten styl CSS wchodzi w życie, zmieniając rozmiar czcionki naszej witryny z 16 pikseli, które pierwotnie ustaliliśmy, na naszą nową wartość 20 piksele. 
 Dodawanie kolejnych stylów 

Umieść jak najwięcej Zasady CSS w tym zapytaniu medialnym w razie potrzeby, aby dostosować wygląd swojej witryny. Na przykład, aby nie tylko zwiększyć rozmiar czcionki do 20 pikseli, ale także zmienić kolor wszystkich akapitów na czarny (#000000), dodaj to: 
@media screen i (minimalna szerokość: 1000px) {
ciało {
rozmiar czcionki: 20px;
}
p {
kolor: #000000;
}
}
 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: 
@media screen i (minimalna szerokość: 1000px) {
ciało {
rozmiar czcionki: 20px;
}
p {
kolor: #000000;
{
}
@media screen i (min. szerokość: 1400px) {
ciało {
rozmiar czcionki: 24px;
}
}

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 „max-width: 1000px” ma zastosowanie, gdy rozmiar przeglądarki spadnie poniżej tego rozmiaru. 

Zacytuj ten artykuł.