Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 19.04.2025)
940150
солдат
370
самолетов
335
вертолетов
10676
танков
22266
ББМ
26600
артиллерия
1139
ПВО
1368
РСЗО
45162
машин
28
корабли и катера
Медиа-запросы в CSS для респонсивного дизайна
Опубликовано Обновлено: 05.06.2017

Медиа-запросы в CSS для респонсивного дизайна

 

 

В одной из прошлых статей мы уже рассматривали способы достижения адаптивности в веб-дизайне с помощью медиа-запросов CSS3.
С помощью CSS медиа-запросов веб-дизайнеры могут создавать стили для определенных устройств, а также при выполнении определенных условий (например, при определенной ширине, высоте или ориентации экрана устройства).

В этой публикации мы рассмотрим примеры наиболее часто используемых медиа-запросов в веб-дизайне.

 

 

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

/* ----- Девайсы с большими экранами ----------- */
@media only screen
and (min-width: 1824px) {
	/* ваши CSS-стили здесь */
}

/* ----- Смартфоны (ориентация экрана Portrait и Landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
	/* ваши CSS-стили здесь */
}

/* ----- Смартфоны (ориентация экрана Landscape) ----------- */
@media only screen
and (min-width: 321px) {
	/* ваши CSS-стили здесь */
}

/* ----- Смартфоны (ориентация экрана Portrait) ----------- */
@media only screen
and (max-width: 320px) {
	/* ваши CSS-стили здесь */
}

/* ----- iPhone 5 (ориентация экрана Portrait и Landscape)----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
	/* ваши CSS-стили здесь */
}

/* ----- iPhone 5 (ориентация экрана Landscape)----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: landscape) {
	/* ваши CSS-стили здесь */
}

/* ----- iPhone 5 (ориентация экрана Portrait)----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: portrait) {
	/* ваши CSS-стили здесь */
}

/* ----- iPad-ы (ориентация экрана Portrait и Landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
	/* ваши CSS-стили здесь */
}

/* ----- iPad-ы (ориентация экрана Landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
	/* ваши CSS-стили здесь */
}

/* ----- iPad-ы (ориентация экрана Portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
	/* ваши CSS-стили здесь */
}

 

Браузерная поддержка медиа-запросов

CSS медиа-запросы поддерживаются в Chrome 1+, Firefox 3.6+, Internet Explorer (IE) с версии 9+, Opera 10+, Safari 4+, а также в смартфонах и других мобильных устройствах.

 

Если у вас есть полезные идеи об использовании медиа-запросов в CSS, не стесняйтесь высказывать их в комментариях ниже. Хорошего настроения!

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Быстрый доступ по сайту SebWeo
Угости меня кофе