CSS Media Queries - Przykłady
- Poprzednia strona CSS Media Queries
- Następna strona Wprowadzenie do RWD
CSS Media Queries - Więcej przykładów
Zobaczmy więcej przykładów użycia media queries.
Media queries to popularna technologia do przesyłania niestandardowych arkuszy stylów do różnych urządzeń.
Poniżej przedstawiam prosty przykład, w którym zmieniamy kolor tła różnych urządzeń:

Przykład
/* Ustaw kolor tła ciała na kremowy */ body { background-color: tan; } /* Ustaw kolor tła na niebieski na ekranach o rozdzielczości mniejszej lub równej 992 pikseli */ @media screen and (max-width: 992px) { body { background-color: blue; } } /* Ustaw kolor tła na oliwkowy na ekranach o rozdzielczości 600 pikseli lub mniejszej */ @media screen and (max-width: 600px) { body { background-color: olive; } }
Chcesz wiedzieć, dlaczego dokładnie używamy 992px i 600px? To są tzw. "typowe punkty przerwania" (typical breakpoints) urządzeń. Możesz je znaleźć w naszej Tutorial projektowania responsywnej witryny internetowej Naucz się więcej o typowych punktach przerwania.
Menu media queries
In this example, we use media queries to create a responsive navigation menu that varies in different screen sizes.
Przykład
/* Navbar container */ .topnav { overflow: hidden; background-color: #333; } /* Navbar links */ .topnav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* On screens with a width of 600 pixels or less, stack the menu links instead of displaying them side by side */ @media screen and (max-width: 600px) { .topnav a { float: none; width: 100%; } }
Column media queries
A common use of media queries is to create a flexible layout. In this example, we create a layout that changes between four columns, two columns, and full-width columns depending on different screen sizes:
Large screens:
Medium screens:
Small screens:
Przykład
/* Create four adjacent floating equal columns */ .column { float: left; width: 25%; } /* On screens with a width of 992 pixels or less, change from four columns to two columns */ @media screen and (max-width: 992px) { .column { width: 50%; } } /* On screens with a width of 600 pixels or less, stack the columns instead of displaying them side by side */ @media screen and (max-width: 600px) { .column { width: 100%; } }
Wskazówka:a more modern method of creating column layouts is to use CSS Flexbox (see the examples below). However, Internet Explorer 10 and earlier versions do not support it. If support for IE6-10 is required, use floats (as shown above).
To learn more about the flexbox layout module, please study Flexbox CSS this chapter.
To learn more about responsive web design, please study our Tutorial projektowania responsywnej witryny internetowej.
Przykład
/* Container of the flexbox */ .row { display: flex; flex-wrap: wrap; } /* Create four equal columns */ .column { flex: 25%; padding: 20px; } /* On screens with a width of 992 pixels or less, change from four columns to two columns */ @media screen and (max-width: 992px) { .column { flex: 50%; } } /* On screens with a width of 600 pixels or less, stack the columns instead of displaying them side by side */ @media screen and (max-width: 600px) { .row { flex-direction: column; } }
Hiding elements with media queries
Another common use of media queries is to hide elements on different screen sizes:
Na małych ekranach ukryję to.
Przykład
/* Jeśli rozmiar ekranu wynosi 600px lub mniej, ukryj ten element */ @media screen and (max-width: 600px) { div.example { display: none; } }
Zmiana rozmiaru czcionki za pomocą zapytań mediowych
Możesz również użyć zapytań mediowych do zmiany rozmiaru czcionki elementów na różnych rozmiarach ekranu:
Zmienne rozmiary czcionki
Przykład
/* Jeśli rozmiar ekranu jest większy niż 600 pikseli, ustaw rozmiar czcionki <div> na 80 pikseli */ @media screen and (min-width: 600px) { div.example { font-size: 80px; } } /* Jeśli rozmiar ekranu wynosi 600px lub mniej, ustaw rozmiar czcionki <div> na 30px */ @media screen and (max-width: 600px) { div.example { font-size: 30px; } }
Elastyczna biblioteka obrazów
W tym przykładzie użyjemy zapytań mediowych z一起使用 flexbox, aby stworzyć responsywną bibliotekę obrazów:
Przykład
Elastyczna strona internetowa
W tym przykładzie użyjemy zapytań mediowych z一起使用 flexbox, aby stworzyć responsywną stronę internetową, która zawiera elastyczną nawigację i elastyczne zawartość.
Przykład
Kierunek: Portret / Panorama
Zapytania mediowe mogą również być używane do zmiany układu strony na podstawie kierunku przeglądarki.
Możesz ustawić zestaw atrybutów CSS, które mają zastosowanie tylko wtedy, gdy szerokość okna przeglądarki jest większa niż wysokość, co nazywa się trybem pionowym:
Przykład
Jeśli kierunek jest w trybie pionowym, użyj jasnoniebieskiego koloru tła:
@media only screen and (orientation: landscape) { body { background-color: lightblue; } }
Od minimalnej do maksymalnej szerokości
Możesz również ustawić minimalną i maksymalną szerokość za pomocą atrybutów max-width i min-width.
Na przykład, gdy szerokość przeglądarki wynosi od 600 do 900 pikseli, zmień wygląd elementu <div>:
Przykład
@media screen and (max-width: 900px) and (min-width: 600px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } }
Użycie dodatkowych wartości: W poniższym przykładzie używamy przecinka (podobnego do operatora OR) do dodania dodatkowych zapytań mediowych do już istniejących zapytań mediowych:
Przykład
/* Kiedy szerokość ekranu wynosi od 600 do 900 pikseli lub jest większa niż 1100 pikseli - zmień wygląd <div> */ @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } }
Podręcznik referencyjny CSS @media
Pełne przegląd wszystkich typów mediów i cech/expressionów, zobacz Reguła @media w referencie CSS.
Wskazówka:Aby uzyskać więcej informacji na temat projektowania responsywnej witryny internetowej (jak dostosować się do różnych urządzeń i ekranów) oraz korzystania z punktów przecięcia zapytań mediowych, przeczytaj nasz Tutorial projektowania responsywnej witryny internetowej.
- Poprzednia strona CSS Media Queries
- Następna strona Wprowadzenie do RWD