Типовые разрешения экранов под адаптивную вёрстку

Шаблон CSS с медиазапросами, подходящими под бОльшую часть мобильных устройств

Рекомендации лучших собаководов: Typical Device Breakpoints от w3schools

/* Очень компактные устройства (телефоны и смартфоны, 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) {…}

Рекомендации лучших собаководов: Typical Device Breakpoints от Bootstrap

Основной набор

// Очень компактные устройства (телефоны и смартфоны; меньше, чем 576px)
// No media query since this is the default in Bootstrap

// Компактные устройства (смартфоны в горизонтальном положении, 576px и больше)
@media (min-width: 576px) { … }

// Средние устройства (планшеты, 768px и больше)
@media (min-width: 768px) { … }

// Большие устройства (десктопы, 992px и больше)
@media (min-width: 992px) { … }

// Очень большие устройства (ноутбуки и десктопы с большими экранами, 1200px и больше)
@media (min-width: 1200px) { … }

Набор «от обратного»: указанный размер или меньше

// Очень компактные устройства (телефоны и смартфоны; меньше, чем 576px)
@media (max-width: 575.98px) { … }

// Компактные устройства (смартфоны в горизонтальном положении, меньше, чем 768px)
@media (max-width: 767.98px) { … }

// Средние устройства (планшеты; меньше, чем 992px)
@media (max-width: 991.98px) { … }

// Большие устройства (десктопы; меньше, чем 1200px)
@media (max-width: 1199.98px) { … }

// Очень большие устройства (десктопы с большими экранами)
// Для таких устройств css @media не требуется

Набор для точного обозначения диапазонов разрешений от минимального до максимального

// Очень компактные устройства (телефоны и смартфоны; меньше, чем 576px)
@media (max-width: 575.98px) { … }

// Компактные устройства (смартфоны в горизонтальном положении, 576px и больше)
@media (min-width: 576px) and (max-width: 767.98px) { … }

// Средние устройства (планшеты, 768px и больше)
@media (min-width: 768px) and (max-width: 991.98px) { … }

// Большие устройства (десктопы, 992px и больше)
@media (min-width: 992px) and (max-width: 1199.98px) { … }

// Очень большие устройства (десктопы с большими экранами, 1200px и больше)
@media (min-width: 1200px) { … }