CSS Media Queries - Przykłady

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ń:

CSS Media Queries

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;
  }
}

Spróbuj sam

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.

Large screens:

Small screens:

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%;
  }
}

Spróbuj sam

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%;
  }
}

Spróbuj sam

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;
  }
}

Spróbuj sam

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;
  }
}

Spróbuj sam

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;
  }
}

Spróbuj sam

Elastyczna biblioteka obrazów

W tym przykładzie użyjemy zapytań mediowych z一起使用 flexbox, aby stworzyć responsywną bibliotekę obrazów:

Przykład

Spróbuj sam

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

Spróbuj sam

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;
  }
}

Spróbuj sam

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;
  }
}

Spróbuj sam

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;
  }
}

Spróbuj sam

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.