Responsywne projektowanie stron internetowych — zapytania mediów
Co to jest zapytanie medialne?
Zapytanie o media to technika CSS wprowadzona w CSS3.
Wykorzystuje @mediaregułę, aby włączyć blok właściwości CSS tylko wtedy, gdy spełniony jest określony warunek.
Przykład
Jeśli okno przeglądarki ma rozmiar 600 pikseli lub mniejszy, kolor tła będzie jasnoniebieski:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Dodaj punkt przerwania
Wcześniej w tym samouczku stworzyliśmy stronę internetową z wierszami i kolumnami, która była responsywna, ale nie wyglądała dobrze na małym ekranie.
Zapytania medialne mogą w tym pomóc. Możemy dodać punkt przerwania, w którym pewne części projektu będą zachowywać się inaczej po każdej stronie punktu przerwania.
Pulpit
Telefon
Użyj zapytania o media, aby dodać punkt przerwania na 768px:
Przykład
Gdy ekran (okno przeglądarki) jest mniejszy niż 768px, każda kolumna powinna mieć szerokość 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Zawsze najpierw projektuj dla urządzeń mobilnych
Mobile First oznacza projektowanie dla urządzeń mobilnych przed projektowaniem dla komputerów stacjonarnych lub innych urządzeń (dzięki temu strona wyświetla się szybciej na mniejszych urządzeniach).
Oznacza to, że musimy wprowadzić pewne zmiany w naszym CSS.
Zamiast zmieniać style, gdy szerokość jest mniejsza niż 768px, powinniśmy zmienić projekt, gdy szerokość jest większa niż 768px. Dzięki temu nasz projekt Mobile First będzie:
Przykład
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Kolejny punkt przerwania
Możesz dodać dowolną liczbę punktów przerwania.
Wstawimy też punkt przerwania między tabletami a telefonami komórkowymi.
Pulpit
Tablet
Telefon
Robimy to, dodając jeszcze jedno zapytanie o media (przy 600px) oraz zestaw nowych klas dla urządzeń większych niż 600px (ale mniejszych niż 768px):
Przykład
Zauważ, że te dwa zestawy klas są prawie identyczne, jedyną różnicą jest nazwa ( col-i col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Może wydawać się dziwne, że mamy dwa zestawy identycznych klas, ale w HTML daje nam to możliwość decydowania, co stanie się z kolumnami w każdym punkcie przerwania:
Przykład HTML
Dla komputerów stacjonarnych:
Pierwsza i trzecia sekcja będą obejmować po 3 kolumny. Środkowa sekcja obejmie 6 kolumn.
Dla tabletów:
Pierwsza sekcja będzie obejmować 3 kolumny, druga będzie obejmować 9, a trzecia sekcja zostanie wyświetlona poniżej pierwszych dwóch sekcji i będzie obejmować 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>
Typowe punkty przerwania urządzenia
Istnieje mnóstwo ekranów i urządzeń o różnych wysokościach i szerokościach, więc trudno jest określić dokładny punkt przerwania dla każdego urządzenia. Aby uprościć sprawę, możesz kierować reklamy na pięć grup:
Przykład
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientacja: Portret / Krajobraz
Zapytania o media mogą być również używane do zmiany układu strony w zależności od orientacji przeglądarki.
Możesz mieć zestaw właściwości CSS, które będą miały zastosowanie tylko wtedy, gdy okno przeglądarki jest szersze niż jego wysokość, czyli tak zwana orientacja pozioma:
Przykład
Strona internetowa będzie miała jasnoniebieskie tło, jeśli orientacja jest w trybie poziomym:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Ukryj elementy za pomocą zapytań o media
Innym powszechnym zastosowaniem zapytań o media jest ukrywanie elementów na ekranach o różnych rozmiarach:
Przykład
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Zmień rozmiar czcionki za pomocą zapytań o media
Możesz także użyć zapytań o media, aby zmienić rozmiar czcionki elementu na różnych rozmiarach ekranu:
Zmienny rozmiar czcionki.
Przykład
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media odniesienia
Pełny przegląd wszystkich typów mediów i funkcji/wyrażeń można znaleźć w regule @media w dokumentacji CSS .