Медиа запросы в CSS — шпаргалка основных media queries

Я здесь не буду расписывать основы адаптивного веб-дизайна и преимущества адаптивного сайта. Когда страница автоматически подстраивается под различные разрешения мониторов — это, безусловно, здорово и принесёт вам дополнительный трафик с мобильных устройств и планшетов. Владельцы ноутов с небольшим разрешением монитора тоже скажут вам спасибо.

Я оставлю шпаргалку основных медиа запросов (media queries), которые использую на практике сам. Понятное дело, что абсолютно все устройства эти запросы не покроют. При необходимости пишите свои media queries, проставляя нужные контрольные точки. Существует уже определённая статистика, согласно которой есть ряд особо популярных разрешений мониторов, на которые стоит ориентироваться в первую очередь. Вот такая статистика за 2020 год:

Разрешение Пользователей Динамика
1366×768 21.
15 %		 -1.46%
360×640 18.28 % +2.31%
1920×1080 12.29 %-0.85% -0.85%
1280×1024 6.94 % -0.40%
1600×900 4.57 % -0.23%
375×667 4.36 % +0.48%
1024×768 4.08 % -0.26%
320×568 3.83 % +0.10%
1440×900 3.16 % -0.19%
1280×800
3.08 %		 -0.02%
1680×1050 2.03 % -0.25%
768×1024 2.00 % +0.07%
1536×864 1.93 % +0. 22%
320×534 1.84 % +0.05%
320×570 1.62 % +0.09%
1280×720 1.42 % +0.04%
1360×768 1.05 % -0.22%

Должен быть подключен мета тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Шпаргалка Media queries CSS

/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* стили */
}

/* Smartphones (горизонтальная) ----------- */
@media only screen and (min-width: 321px) {
/* стили */
}

/* Smartphones (вертикальная) ----------- */
@media only screen and (max-width: 320px) {
/* стили */
}

/* iPads (вертикальная и горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* стили */
}

/* iPads (горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* стили */
}

/* iPads (вертикальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* стили */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* Настольные компьютеры и ноутбуки ----------- */
@media only screen  and (min-width: 1224px) {
/* стили */
}

/* Большие экраны ----------- */
@media only screen  and (min-width: 1824px) {
/* стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

Сервисы по проверке сайта на адаптивность:

  • http://adaptivator. ru
  • http://iloveadaptive.com
  • Google PageSpeed