Шаблон 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) { … }
