Использование медиа-запросов — Веб-технологии для разработчиков

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

Медиа для разных типов устройств

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

@media print { ... }

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

@media screen, print { ... }

Список устройств вы можете найти перейдя по этой ссылке. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

Media features описывают некие характеристики определенного user agent, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

@media (hover: hover) { ... }

Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина viewport меньше или равна 12450px:

@media (max-width: 12450px) { ... }

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

@media (color) { ... }

Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:

@media speech and (aspect-ratio: 11/5) { ... }

Дополнительные примеры медиа запросов, смотрите на справочной странице для каждой конкретной функции.

Создание комплексных медиа запросов

Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

В прошлом примере мы видели как применяется оператор and для группировки type и функции. Оператор 

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

and

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { ...  }

comma-separated lists

You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

not

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

 @media not all and (monochrome) { ... }

… so that the above query is evaluated like this:

@media not (all and (monochrome)) { ... }

… rather than like this:

@media (not all) and (monochrome) { ... }

As another example, the following media query:

@media not screen and (color), print and (color) { ... }

… is evaluated like this:

@media (not (screen and (color))), print and (color) { ... }

only

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />

Смотрите также

Media Screen CSS в адаптивной верстке

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

Media-screen примеры

Если кто-то думает, что это очень сложно и непостижимо, то сейчас ваше мнение изменится и вы на моем примере убедитесь в том, что не так страшен черт, как его малюют. Итак, у нас есть страница, на которой есть шапка с картинкой и блок с контентом черного цвета на желтом фоне.

Для начала в head нужно добавить такую строчку:

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

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>

CSS код сейчас такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#header{
	height:120px;
	position:relative
	padding:5px;
}
#content{
	background:#fff000;
	padding:5px;
}
p {
    padding: 5px;
}	
 .txt {
    font: 65px Verdana bold;
    position: relative;
    top: 16px;
    color: #fff;
    left: 80px;
   }
img{
     margin:5px;
}

#header{ height:120px; position:relative padding:5px; } #content{ background:#fff000; padding:5px; } p { padding: 5px; } .txt { font: 65px Verdana bold; position: relative; top: 16px; color: #fff; left: 80px; } img{ margin:5px; }

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

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 @media screen and (max-width: 1000px) {
#header {
	background:#543567; /* Красим шапку */
	}
   }
 @media screen and (min-width: 1000px) {
 .txt {
      font: 25px Verdana bold; /* Показываем заголовок */
      position:relative;
      top; 15px;
      left: 30px;
      display:none;	
	}
   }
@media screen and (max-width: 1000px) {
#content {
	 background:#657493; /* Меняем цвет текста и фона содержимого */
	 color:#fff;			
	}
   }
@media screen and (max-width: 1000px) {
    img {
	float:right; /* Смещаем логотип вправо */			
	}
   }

@media screen and (max-width: 1000px) { #header { background:#543567; /* Красим шапку */ } } @media screen and (min-width: 1000px) { .txt { font: 25px Verdana bold; /* Показываем заголовок */ position:relative; top; 15px; left: 30px; display:none; } } @media screen and (max-width: 1000px) { #content { background:#657493; /* Меняем цвет текста и фона содержимого */ color:#fff; } } @media screen and (max-width: 1000px) { img { float:right; /* Смещаем логотип вправо */ } }

Более подробно можно посмотреть код демонстрационной страницы и самостоятельно разобраться что к чему.

Демо

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

Надеюсь, что вы уловили мою мысль, которую я хотел донести до вас касательно медиа-запросов. Таким образом можно создавать отдельные таблицы стилей CSS специально для определенных устройств и даже для печати. Такой подход будет гораздо правильней, чем прописывать все стили для каждого устройства в одном файле. Подключается это вот так:

1

<link rel= "stylesheet" href= "device.css" media= "only screen and (max-device width:640px)"/>

<link rel= «stylesheet» href= «device.css» media= «only screen and (max-device width:640px)»/>

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

CSS: Правило @media | медиа запросы

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

Синтаксис

@media тип_устройства and|not|only (медиа_особенности) {
    CSS код;
}

Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:

<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)"
 href="stylesheet.css">

Типы устройств

К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:

/* только для печати */
@media print {
  /* скрыть меню */
  #navigation { display: none; }

  /* начинать каждую новую страницу с заголовка h2 */
  h2 { page-break-before: always; }
}

Особенности устройств для медиа запросов

Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.

Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:

@media screen and (min-width: 600px) {}

Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:

@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

Логические операторы

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

@media (min-width: 700px), (orientation: landscape) {}

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

@media not screen and (device-width: 800px) {}

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

/* Не работает в старых браузерах */
@media only screen and (min-width: 600px) {}

Почему мои медиа-запросы CSS3 не работают на мобильных устройствах?

в стилях.css, я использую медиа-запросы, оба из которых используют вариант:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

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

может ли кто-нибудь указать мне в правильном направлении?

9 ответов

все три из них были полезными советами, но похоже, мне нужно было добавить мета-тег:

<meta content="width=device-width, initial-scale=1" name="viewport" />

теперь он, похоже, работает как в Android (2.2), так и в iPhone…

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

@media screen and (max-width: 1024px) {}

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

 @media print {...} 

 @media screen, print {...} 

 @media (hover: hover) {...} 

 @media (max-width: 12450px) {...} 

 @media (цвет) {...} 

 @media speech и (соотношение сторон: 11/5) {...} 

 @media (min-width: 30em) и (ориентация: альбомная) {...} 

 @media screen и (min-width: 30em) и (ориентация: альбомная) {...} 

 @media (min-height: 680px), экран и (ориентация: портретная) {...} 

 @media not all and (монохромный) {...}
 

 @media not (all and (монохромный)) {...}
 

 @media (не все) и (монохромные) {...} 

 @media not screen and (color), print and (color) {...}
 

 @media (не (экран и (цвет))), печать и (цвет) {...} 

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
 

 #header {
высота: 120 пикселей;
позиция: относительная
отступ: 5 пикселей;
}
#content {
фон: # fff000;
отступ: 5 пикселей;
}
п {
    отступ: 5 пикселей;
}
 .текст {
    шрифт: 65px Verdana bold;
    положение: относительное;
    верх: 16 пикселей;
    цвет: #fff;
    слева: 80 пикселей;
   }
img {
     маржа: 5 пикселей;
} 

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
 

 @media screen and (max-width: 1000px) {
#header {
фон: # 543567; / * Красим шапку * /
}
   }
 @media screen и (min-width: 1000px) {
 .текст {
      шрифт: 25px Verdana bold; / * Показываем заголовок * /
      положение: относительное;
      Топ; 15 пикселей;
      слева: 30 пикселей;
      дисплей: нет;
}
   }
@media screen и (max-width: 1000 пикселей) {
#content {
фон: # 657493; / * Меняем цвет текста и фона содержимого * /
цвет: #fff;
}
   }
@media screen и (max-width: 1000 пикселей) {
    img {
float: right; / * Смещаем логотип вправо * /
}
   } 

 1
 

@media тип_устройства и | не | только (медиа_особенности) {
    CSS код;
}
 

/ * только для печати * /
@media print {
  / * скрыть меню * /
  #navigation {display: none; }

  / * начинать каждую новую страницу с заголовка h2 * /
  h2 {разрыв страницы перед: всегда; }
}
 

@media screen и (min-width: 600 пикселей) {}
 

@media (max-width: 500 пикселей) и (min-aspect-ratio: 1/1) {}
 

 @media (min-width: 700px), (ориентация: альбомная) {}
 

 @media, а не экран, а (ширина устройства: 800 пикселей) {}
 

 / * Не работает в старых браузерах * /
Только экран @media и (min-width: 600 пикселей) {} 

  / * - [Обычные стили CSS] ---------------------------------- * /

@media only screen и (max-width: 767px) {

    / * - [Здесь можно найти мобильные стили] --------------------------- * /
}
  

 .edcar_letter {
    размер шрифта: 180 пикселей;
}

@media screen и (max-width: 350px) {
    .edcar_letter {
        размер шрифта: 120 пикселей;
    }
}
  

  


<стиль>
     @media screen и (max-width: 900 пикселей) {}
     @media screen и (min-width: 900px) и (max-width: 1200px) {}
     @media screen и (min-width: 1200 пикселей) {}
   

  @media screen и (max-width: 1024px) {}
  

  @media all and (max-width: 320px) and (min-width: 0px) {
  #container {
    ширина: 100%;
  }
  sty {
    высота: 50%;
    ширина: 100%;
    выравнивание текста: центр;
    маржа: 0;
  }
}

.имя пользователя {
  нижнее поле: 20 пикселей;
  маржа сверху: 10 пикселей;
}
  

  @media screen and (max-width: 350px) {// Не max-height
        .письмо{
            размер шрифта: 20 пикселей;
        }
    }