Media Query в CSS Другим важным элементом в построении адаптивого дизайна являются правила Media Query, которые поволяют определить стиль в зависимости от размеров браузера пользователя. Например, некоторые элементы могут В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль: ...................... Правило media="handheld" указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media="screen" применяется к десктопным браузерам. Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media="screen". Поэтому на подобное решение не стоит полагаться. Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так: ................................ Значение атрибута media (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей - то есть фактически это и есть мобильные устройства. С помощью ключевого слова and можно комбинировать условия, например: Данный стиль будет применяться, если ширина браузера находится в диапазоне от 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, хотя это необязательно. Например, определим следующую веб-страницу:

Адаптивная веб-страница

Сначала идут общие стили, которые актуальны прежде всего для мобильных устройств с небольшими экранами. Затем идут стили для устройств с экранами средней ширины: фаблеты, планшеты. И далее идут стили для десктопов. И например, на эмуляторе Opera Mobile при эмуляции устройства с шириной в 480 пикселей страница приобретет красный цвет: Правила media query в CSS 3 А в браузере обычного компьютера страница будет иметь синий цвет, как и определено в стилях: Правила media query в HTML 5 Глава 1. Введение в HTML5 Глава 2. Элементы в HTML5 Глава 3. Работа с формами Глава 4. Семантическая структура страницы Глава 5. Основы CSS3. Селекторы Глава 6. Основы CSS3. Свойства Глава 7. Создание макета страницы и верстка Глава 8. Трансформации, переходы и анимации Глава 9. Адаптивный дизайн Глава 10. Мультимедиа Глава 11. Canvas Глава 12. Flexbox Глава 13. Grid Layout Глава 14. Дополнительные статьи Об учебнике