Jak to zrobić — Typowe punkty przerwania urządzenia
Dowiedz się, jak używać zapytań o media dla typowych punktów przerwania urządzeń.
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ęć popularnych 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) {...}
Powiązane strony
Samouczek CSS: Zapytania o media CSS
Samouczek CSS: Przykłady zapytań o media CSS
Dokumentacja CSS: reguła @media
Samouczek RWD: Responsywne projektowanie stron internetowych z zapytaniami o media
Samouczek JavaScript: metoda window.matchMedia()