CSS3 Media Queries и создание адаптивных макетов

Имея множество устройств, веб-браузеров и экранов разных размеров, нам нужен способ, позволяющий легко определить, как мы хотим создать для них веб-страницу. Теперь это предлагается нам через Media Queries в CSS3.

CSS3 Media Queries поможет вам получить информацию об устройстве / веб-браузере, обращающемся к вашей веб-странице, и оттуда вы сможете решить, как вы хотите, чтобы контент был представлен наилучшим образом в соответствии с его возможностями. В соответствии со спецификацией CSS3 Media Queries вы должны быть в состоянии проверить :

• ширина
• высота
• Устройство ширины
• Устройство высоты
• ориентация
• соотношение сторон
• Устройство коэффициента пропорциональности
• цвет
• цветовой индекс
• монохромный
• разрешающая способность
• сканирование
• сетка

(Обратите внимание, что не все вышеперечисленное может не поддерживаться в веб-браузерах на данный момент)

Наиболее интересные для меня, и те, которые я расскажу здесь:

• мин-ширина
• Максимальная ширина
• ориентация

Простой пример

Давайте начнем с очень простого примера. В этом случае цвет фона элемента по умолчанию красный. Однако, если доступная ширина превышает 500 пикселей, мы хотим, чтобы она была синей:

.media-query-elm {
	background: #f00;
}

@media screen and (min-width: 500px) {
	.media-query-elm {
		background: #00f;
	}
}

Итак, как вы могли знать ранее, вы указываете носитель (возможно, вы использовали его для CSS для экрана, а затем для печати) и вместе с этим вы устанавливаете критерии минимальной ширины. Любой соответствующий клиент веб-браузера, который будет применять / переопределять все правила CSS, указанные в блоке.

Наличие гибкого макета

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

Поэтому, чтобы расширить простой пример выше, у нас будет разная ширина и расположение в зависимости от доступной ширины:

.navigation {
	float: left;
	width: 300px;
}

.main-content {
	float: right;
	width: 500px;
}

@media screen and (min-width: 1000px) {
	.navigation {
		width: 350px;
	}

	.main-content {
		float: right;
		width: 650px;
	}
}

@media screen and (max-width: 399px) {
	.navigation {
		display: block
		float: none;
		width: 100%;
	}

	.main-content {
		display: block
		float: none;
		width: 100%;
	}
}

В результате мы имеем размер по умолчанию для элементов навигации и основного контента и размещаем их рядом друг с другом, но если веб-браузер / устройство пользователя поддерживает более высокую ширину, мы немного увеличим их. Однако для более низких значений ширины (предположительно iPhone, телефонов Android и т. П.) Вместо этого мы помещаем два элемента в отдельную строку, удаляем плавающие и позволяем им занять всю доступную ширину.

Использование и, или, только и не

Вы можете расширить Media Queries, проверив несколько значений или утверждений или не утверждений. Как вы могли видеть выше, чтобы проверить наличие нескольких значений true, вы используете ключевое слово and:

@media screen and (min-width: 100px) {
	.navigation {
		width: 350px;
	}
}

Чтобы проверить операторы или операторы, вы любопытно используете разделение запятыми (что имеет смысл, но также выглядит немного запутанным, потому что для других вещей в CSS, таких как множественные фоны, вы используете запятые для их объединения ). Во всяком случае, это будет выглядеть так:

@media screen and (min-width: 100px),
@media handheld {
	.navigation {
		width: 350px;
	}
}

Для более старых пользовательских агентов вы можете использовать единственное ключевое слово, чтобы убедиться, что оно не обрабатывает контент:

@media only screen and (min-width: 100px) {
	.navigation {
		width: 350px;
	}
}

И наконец, у нас также есть ключевое слово not, чтобы исключить определенные критерии (то есть оно будет применяться ко всем, кто не соответствует этому):

Получение ориентации

Есть также интересное свойство, называемое ориентацией, которое поможет вам определить, отображается ли что-то в альбомной или портретной ориентации. Вот как это использовать:

@media screen and (orientation: portrait) {
	.portrait {
		display: inline;
	}
	.not-detected {
		display: none;
	}
}

@media screen and (orientation: landscape) {
	.landscape {
		display: inline;
	}
	.not-detected {
		display: none;
	}
}

и в сочетании с этим HTML, он покажет вам текущее вращение:

 Device rotation is
    <span class="portrait">portrait</span>
    <span class="landscape">landscape</span>

Примечание о настольных веб-браузерах

Над кодом для проверки ориентации все хорошо и хорошо для iPhone, телефонов Android и т. Д., Но как насчет настольных веб-браузеров? Интересно, что они поддерживают это и возвращают значение, основанное на соотношении ширины и высоты текущего окна. На практике это означает, что если окно веб-браузера шире, чем высоко, оно рассматривается как альбомное, в противном случае оно рассматривается как портретное.

Я думаю, что это имеет смысл, но вам не нужно менять макет для настольных веб-браузеров исключительно на основе ориентации. Совет всегда объединять его с другими значениями, такими как min-width / max-width.

IPhone и определение ширины

По какой-то причине, кажется, постоянно используются различные метаэлементы. Я хочу отметить, что для того, чтобы заставить iPhone проверять ширину и изменять макет, вам нужно добавить метаэлемент и соответственно установить ширину (иначе он этого не сделает):

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

В Интернете я видел несколько примеров, где вам также пришлось бы указывать минимальный масштаб до 1,0, но бывают случаи, когда вы этого не хотите, и в моих тестах максимальный масштаб был достаточным.

Поддержка веб-браузера

Веб-браузеры, которые поддерживают CSS3 Media Queries:

• Internet Explorer 9 (готовится к выпуску)
• Firefox 3.5+
• Google Chrome 5+
• Safari 4+
• Opera 10.6+ (здесь может потребоваться дополнительная информация об уровне поддержки)

Свойство ориентации также доступно в следующих мобильных устройствах / системах:

• iOS4
• Android 2+
• Мобильный Firefox
• болт
• MicroB

(мобильная поддержка взята из запроса к ориентации СМИ в PPK )

Немного демо

В рамках моих тестов CSS3 у меня есть страница для тестирования медиазапросов CSS3 с доступной шириной и ориентацией .

CSS3 медиа-запросы здесь сегодня!

За исключением Internet Explorer (до версии 9), все остальные веб-браузеры, как настольные, так и мобильные, поддерживают это, и я думаю, что это отличный инструмент для адаптации макета в соответствии с условиями конечного пользователя. Попробуйте и дайте мне знать!