Projektowanie responsywnej witryny - Zapytania media

Co to jest media query?

Media query to technologia CSS3 wprowadzona w CSS.

jest używany tylko wtedy, gdy spełnia określone warunki @media Reguły do odwoływania się do bloków atrybutów CSS.

Przykład

Jeśli szerokość okna przeglądarki wynosi 600px lub mniej, kolor tła powinien być jasnoniebieski:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Spróbuj sam

Dodaj punkt przerwania

Wcześniej w tym tutorialu stworzyliśmy stronę internetową zawierającą wiersze i kolumny, ale ta responsywna strona wyglądała kiepsko na małych ekranach.

Media query może pomóc. Możemy dodać punkt przerwania, gdzie pewne części projektu będą się zachowywać inaczej po każdej stronie punktu przerwania.


komputer stacjonarny

telefon

Dodaj punkt przerwania w 768px za pomocą media query:

Przykład

Kiedy szerokość ekranu (okno przeglądarki) jest mniejsza niż 768px, szerokość każdej kolumny powinna wynosić 100％:

/* Dla urządzeń stacjonarnych: */
.col-1 {szerokość: 8.33%;}
.col-2 {szerokość: 16.66%;}
.col-3 {szerokość: 25%;}
.col-4 {szerokość: 33.33%;}
.col-5 {szerokość: 41.66%;}
.col-6 {szerokość: 50%;}
.col-7 {szerokość: 58.33%;}
.col-8 {szerokość: 66.66%;}
.col-9 {szerokość: 75%;}
.col-10 {szerokość: 83.33%;}
.col-11 {szerokość: 91.66%;}
.col-12 {szerokość: 100%;}
@media only screen and (max-width: 768px) {
  /* Dla telefonów: */
  [class*="col-"] {
    szerokość: 100%;
  }
}

Spróbuj sam

Zawsze projekt mobile first

Mobile First oznacza, że zanim zaprojektujemy komputer stacjonarny lub inne urządzenie, najpierw projektujemy dla urządzeń mobilnych (co pozwoli na szybsze wyświetlanie strony na mniejszych urządzeniach).

Oznacza to, że musimy dokonać pewnych ulepszeń w CSS.

Kiedy szerokość jest mniejsza niż 768px, powinniśmy zmodyfikować projekt, a nie zmieniać szerokość. Zrobiliśmy to w oparciu o projekt "mobile first":

Przykład

/* Dla telefonów: */
[class*="col-"] {
  szerokość: 100%;
}
@media tylko ekran i (min-szerokość: 768px) {
  /* Dla komputerów stacjonarnych: */
  .col-1 {szerokość: 8.33%;}
  .col-2 {szerokość: 16.66%;}
  .col-3 {szerokość: 25%;}
  .col-4 {szerokość: 33.33%;}
  .col-5 {szerokość: 41.66%;}
  .col-6 {szerokość: 50%;}
  .col-7 {szerokość: 58.33%;}
  .col-8 {szerokość: 66.66%;}
  .col-9 {szerokość: 75%;}
  .col-10 {szerokość: 83.33%;}
  .col-11 {szerokość: 91.66%;}
  .col-12 {szerokość: 100%;}
}

Spróbuj sam

inny punkt przerwania

Możesz dodać dowolną liczbę punktów przerwania.

Dodamy również punkt przerwania między tabletami i telefonami.


komputer stacjonarny

tablet

telefon

Dla tego dodaliśmy media query (przy 600 pikselach) oraz nową grupę klas dla urządzeń o większej szerokości niż 600 pikseli, ale mniejszej niż 768 pikseli:

Przykład

Proszę zauważyć, że obie grupy klas są prawie identyczne, różnią się tylko nazwami (col- i col-s-):

/* Dla telefonów: */
[class*="col-"] {
  szerokość: 100%;
}
@media tylko ekran i (min-szerokość: 600px) {
  /* Dla tabletów: */
  .col-s-1 {szerokość: 8.33%;}
  .col-s-2 {szerokość: 16.66%;}
  .col-s-3 {szerokość: 25%;}
  .col-s-4 {szerokość: 33.33%;}
  .col-s-5 {szerokość: 41.66%;}
  .col-s-6 {szerokość: 50%;}
  .col-s-7 {szerokość: 58.33%;}
  .col-s-8 {szerokość: 66.66%;}
  .col-s-9 {szerokość: 75%;}
  .col-s-10 {szerokość: 83.33%;}
  .col-s-11 {szerokość: 91.66%;}
  .col-s-12 {szerokość: 100%;}
}
@media tylko ekran i (min-szerokość: 768px) {
  /* Dla komputerów stacjonarnych: */
  .col-1 {szerokość: 8.33%;}
  .col-2 {szerokość: 16.66%;}
  .col-3 {szerokość: 25%;}
  .col-4 {szerokość: 33.33%;}
  .col-5 {szerokość: 41.66%;}
  .col-6 {szerokość: 50%;}
  .col-7 {szerokość: 58.33%;}
  .col-8 {szerokość: 66.66%;}
  .col-9 {szerokość: 75%;}
  .col-10 {szerokość: 83.33%;}
  .col-11 {szerokość: 91.66%;}
  .col-12 {szerokość: 100%;}
}

Dwukrotne użycie tych samych klas może wyglądać dziwnie, ale daje nam możliwość użycia HTML do określenia, co się stanie z kolumnami przy każdym punkcie przerwania:

Przykład HTML

Dla komputerów stacjonarnych:

Pierwsza i trzecia część zajmą po 3 kolumny. Środkowa część zajmie 6 kolumn.

Dla tabletów:

Pierwsza część zajmie 3 kolumny, druga część zajmie 9 kolumn, trzecia część zostanie wyświetlona pod pierwszymi dwoma częściami i zajmie 12 kolumn:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Spróbuj sam

Typowe przecięcia urządzeń

Ekranów i urządzeń o różnych wysokościach i szerokościach jest nieskończenie wiele, więc trudno jest stworzyć dokładne przecięcia dla każdego urządzenia. W celu uproszczenia możesz skupić się na pięciu grupach:

Przykład

/* Bardzo małe urządzenia (telefon, 600px i mniej) */
@media only screen and (max-width: 600px) {...} 
/* Małe urządzenia (pionowe tablety i duże telefony, 600 pikseli i więcej) */
@media only screen and (min-width: 600px) {...} 
/* Średnie urządzenia (poziome tablety, 768 pikseli i więcej) */
@media only screen and (min-width: 768px) {...} 
/* Duże urządzenia (laptopy/komputery stacjonarne, 992px i więcej) */
@media only screen and (min-width: 992px) {...} 
/* Duże urządzenia (duże laptopy i komputery stacjonarne, 1200px i więcej) */
@media only screen and (min-width: 1200px) {...}

Spróbuj sam

Kierunek: Portret / Scena

Zapytania mediowe mogą również być używane do zmiany układu strony na podstawie orientacji przeglądarki.

Możesz ustawić zestaw atrybutów CSS, które są stosowane tylko wtedy, gdy szerokość okna przeglądarki jest większa niż wysokość, tzw. kierunek 'pionowy':

Przykład

Jeśli orientacja to tryb pionowy (landscape mode), tło strony będzie jasnoniebieskie:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Spróbuj sam

Ukrywanie elementów za pomocą zapytań mediowych

Innym popularnym zastosowaniem zapytań mediowych jest ukrywanie elementów na różnych rozmiarach ekranu:

Przykład

/* Jeśli rozmiar ekranu wynosi 600 pikseli lub mniej, ukryj ten element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Spróbuj sam

Modyfikacja rozmiaru czcionki za pomocą zapytań mediowych

Możesz również używać zapytań mediowych do zmiany rozmiaru czcionki elementów na różnych rozmiarach ekranu:

Przykład

/* Jeśli rozmiar ekranu wynosi 601px lub więcej, ustaw wartość font-size dla <div> na 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Jeśli rozmiar ekranu wynosi 600px lub mniej, ustaw font-size dla <div> na 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Spróbuj sam

Podręcznik CSS @media

Pełne omówienie wszystkich typów mediów i cech/wyrażeń znajdziesz w Odwiedź @media regułę w podręczniku CSS.