CSS @media для мобильных, планшетов и настольных компьютеров

CSS-правило @media позволяет задать отдельные стили для элементов при просмотре сайта на разных устройствах.

@media тип_устройства оператор (опции) {
	...
}
CSS

Где тип_устройства может принимать следующие значения:

all Все устройства
print Принтеры
screen Экраны компьютеров, планшеты, смартфоны
speech Речевые браузеры

Операторы:

and Логическое И
or или , Логическое ИЛИ
not Логическое отрицание
only Скрывает правило @media от старых браузеров

Опции:

aspect-ratio, min-aspect-ratio, max-aspect-ratio Отношение ширины и высоты области просмотра
color, min-color, max-color Количество бит на цвет для устройства
color-index, min-color-index, max-color-index Количество цветов, которое устройство может отобразить
device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio Соотношение сторон экрана
device-height, min-device-height, max-device-height Вся доступная высота экрана
device-width, min-device-width, max-device-width Вся доступная ширина экрана
height, min-height, max-height Высота области просмотра
width, min-width, max-width Ширина области просмотра
orientation Положение экрана (landscape или portrait)
resolution, min-resolution, max-resolution Разрешение экрана

iPhone 5, 5S, 5C, 5 SE

/* iPhone 5, 5S, 5C, 5 SE (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	...
}

/* iPhone 5, 5S, 5C, 5 SE (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	...
}
CSS

iPhone 6, 6S, 7, 8, SE 2020

/* iPhone 6, 6S, 7, 8, SE 2020 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
	...
}

/* iPhone 6, 6S, 7, 8, SE 2020 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
	...
}
CSS

iPhone 6+, 7+, 8+

/* iPhone 6+, 7+, 8+ (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}

/* iPhone 6+, 7+, 8+ (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}
CSS

iPhone X, XS, 11 Pro, 13 mini

/* iPhone X, XS, 11 Pro, 13 mini (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}

/* iPhone X, XS, 11 Pro, 13 mini (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}
CSS

iPhone XS Max, XR, 11, 11 Pro Max

/* iPhone XS Max, XR, 11, 11 Pro Max (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* iPhone XS Max, XR, 11, 11 Pro Max (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
	...
}
CSS

iPhone 12, 12 Pro, 13, 13 Pro

/* iPhone 12, 12 Pro, 13, 13 Pro (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* iPhone 12, 12 Pro, 13, 13 Pro (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
	...
}
CSS

iPhone 12 Pro Max, 13 Pro Max

/* iPhone 12 Pro Max, 13 Pro Max (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* iPhone 12 Pro Max, 13 Pro Max (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
	...
}
CSS

Samsung Galaxy S3

/* Samsung Galaxy S3 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
	...
}

/* Samsung Galaxy S3 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
	...
}
CSS

Samsung Galaxy S4

/* Samsung Galaxy S4 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* Samsung Galaxy S4 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}
CSS

Samsung Galaxy S5

/* Samsung Galaxy S5 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* Samsung Galaxy S5 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}
CSS
/* iPad (все) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	...
}

/* iPad (портретный режим) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	...
}

/* iPad (альбомный режим) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	...
}
CSS

Только настольные компьютеры

/* Только десктопы */
@media (min-width: 1025px) {
	...
}
CSS

Только большие экраны

/* Только большие экраны */
@media only screen and (min-width : 1824px) {
	...
}
CSS
09.09.2022
252
Предыдущая запись Переезд сайта на HTTPS

Комментарии

, чтобы добавить комментарий.

Другие публикации

Определение мобильного устройства в PHP
Определить телефон или планшет можно с помощью библиотеки PHP Mobile Detect. Это легкий класс использующий строку...
16202
-1
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
34855
+10
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
11914
+4
Список русских стоп слов
Стоп-слова это части речи и местоимения, а также любые слова, не несущие дополнительного смысла.
8626
+4
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
91061
+27
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
341982
+122