Media Query в CSS

Последнее обновление: 03.05.2016

Другим важным элементом в построении адаптивого дизайна являются правила Media Query, которые поволяют определить стиль в зависимости от размеров браузера пользователя.

В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:

<html>
 <head>
  <title>Адаптивная веб-страница</title>
  <link media="handheld" rel="stylesheet" href="mobile.css">
  <link media="screen" rel="stylesheet" href="desktop.css">
 </head>
 <body>
 ......................

Правило media="handheld" указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media="screen" применяется к десктопным браузерам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media="screen". Поэтому на подобное решение не стоит полагаться.

Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:

<html>
 <head>
  <title>Адаптивная веб-страница</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="desctop.css" />
  <link rel="stylesheet" type="text/css" media="(max-device-width:480px)" href="mobile.css" />
 </head>
 <body>
 ................................

Значение атрибута media (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей - то есть фактически это и есть мобильные устройства.

С помощью ключевого слова and можно комбинировать условия, например:

<link rel="stylesheet" type="text/css" media="(min-width:481px) and (max-width:768px)" href="mobile.css" />

Данный стиль будет применяться, если ширина браузера находится в диапазоне от 481 до 768 пикселей.

С помощью директивый @import можно определить один css-файл и импортировать в него стили для определенных устройств:

@import url(desctop.css);
@import url(tablet.css) (min-device-width:481px) and (max-device-width:768);
@import url(mobile.css) (max-device-width:480px);

Также можно не разлелять стили по файлам, а использовать правила CSS3 Media Query в одном файле css:

body {
	background-color: red;
}
/*Далее остальные стили*/
@media (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}

Применяемые функции в CSS3 Media Query:

  • aspect-ratio: отношение ширины к высоте области отображения (браузера)

  • device-aspect-ratio: отношение ширины к высоте экрана устройства

  • max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения (браузера)

  • max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и высота экрана мобильного устройства

  • orientation: ориентация (портретная или альбомная)

Например, мы можем задать разные стили для разных ориентаций мобильных устройств:

/*Стили для портретной ориентации*/
@media only screen and (orientation: portrait){

}
/*Стили альбомной ориентации*/
@media only screen and (orientation: landscape){

}

Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов.

Как правило, при определении стилей предпочтение отдается стилям для самых малых экранов - так называемый подход Mobile First, хотя это необязательно. Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
        <title>Адаптивная веб-страница</title>
		
		<style>
		body {
			background-color: red;
		}
		/* для планшетов и фаблетов */
		@media (min-width: 481px) and (max-width:768px) {
			body {
				background-color: green;
			}
		}
		/* для декстопов */
		@media (min-width:769px) {
			body {
				background-color: blue;
			}
		}
</style>
    </head>
    <body>
        <h2>Адаптивная веб-страница</h2>
    </body>
</html>

Сначала идут общие стили, которые актуальны прежде всего для мобильных устройств с небольшими экранами. Затем идут стили для устройств с экранами средней ширины: фаблеты, планшеты. И далее идут стили для десктопов.

И например, на эмуляторе Opera Mobile при эмуляции устройства с шириной в 480 пикселей страница приобретет красный цвет:

Правила media query в CSS 3

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

Правила media query в HTML 5

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850