Jak utworzyć: typowe punkty przecięcia urządzeń

poprzednia strona można zamknąć element listy
następna strona przenośny element HTML

Naucz się, jak używać zapytań media dla typowych punktów przecięcia urządzeń.

typowe punkty przecięcia urządzeń

Istnieje duża liczba ekranów i urządzeń o różnych wysokościach i szerokościach, więc trudno jest utworzyć dokładne punkty przecięcia dla każdego urządzenia.

Aby upraszczyć operacje, możesz zidentyfikować pięć najczęstszych grup:

przykład

/* supermałe urządzenia (telefon komórkowy, 600px i mniej) */
@media tylko ekran i (max-width: 600px) {...}
/* małe urządzenia (pionowe tablety i duże telefony komórkowe, 600px i więcej) */
@media tylko ekran i (min-width: 600px) {...}
/* średnie urządzenia (poziome tablety, 768px i więcej) */
@media tylko ekran i (min-width: 768px) {...}
/* duże urządzenia (laptopy/komputery stacjonarne, 992px i więcej) */
@media tylko ekran i (min-width: 992px) {...}
/* duże urządzenia (duże laptopy i komputery stacjonarne, 1200px i więcej) */
@media tylko ekran i (min-width: 1200px) {...}

spróbuj sam