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

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

1
@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 Разрешение экрана
2
/* 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 (портретный режим) */
@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+ (портретный режим) */
@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 (портретный режим) */
@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 (портретный режим) */
@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 (портретный режим) */
@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 (портретный режим) */
@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 (портретный режим) */
@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 (портретный режим) */
@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 (портретный режим) */
@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
3
4
/* 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
5
/* Только десктопы */
@media (min-width: 1025px) {
	...
}
CSS
/* Только большие экраны */
@media only screen and (min-width : 1824px) {
	...
}
CSS
09.09.2022
14033
Предыдущая запись Переезд сайта на HTTPS

Комментарии

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

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

Определение мобильного устройства в PHP
Определить телефон или планшет можно с помощью библиотеки PHP Mobile Detect. Это легкий класс использующий строку...
23518
-3
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
44587
+13
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
15246
+3
Список русских стоп слов
Стоп-слова это части речи и местоимения, а также любые слова, не несущие дополнительного смысла.
19621
+11
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
132447
+38
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
892150
+183