Как создать: типичные точки разрыва устройств

предыдущая страница закрываемые элементы списка
следующая страница движимые HTML-элементы

Узнайте, как использовать медиа-запросы для типичных точек разрыва устройств.

Типичные точки разрыва устройств

Существует множество экранов и устройств с различной высотой и шириной, поэтому создание точных точек разрыва для каждого устройства сложно.

Для упрощения работы вы можете определить пять распространенных категорий:

пример

/* очень маленькие устройства (телефон, 600px и ниже) */
@media only screen and (max-width: 600px) {...}
/* малые устройства (вертикальный планшет и большой телефон, 600px и выше) */
@media only screen and (min-width: 600px) {...}
/* средние устройства (横向 планшет, 768px и выше) */
@media only screen and (min-width: 768px) {...}
/* крупные устройства (ноутбук/стационарный компьютер, 992px и выше) */
@media only screen and (min-width: 992px) {...}
/* очень большие устройства (большой ноутбук и стационарный компьютер, 1200px и выше) */
@media only screen and (min-width: 1200px) {...}

попробуйте сами