Медиа запросы в CSS

Оцените материал
(0 голосов)

Здравствуйте! Продолжаем разбираться как сделать сайт адаптивным. Другим важным элементом в построении адаптивого дизайна являются правила 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="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 пикселей страница приобретет красный цвет:

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

Прочитано 1059 раз Последнее изменение Суббота, 22 октября 2016 11:58
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+