Media screen css min and max – CSS3-медиазапросы

webref.ru

Медиа-запросы | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

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

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

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

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

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

следует понимать как

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

а не

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

only

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

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

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

Медиа-функции

Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

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

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

htmlbook.ru

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 и подогнать под свой дизайн.

serblog.ru

Выбираем медиа-запросы: min-width или max-width

Мне часто задают вопросы вроде: «Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая».

Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей. При анализе стилей подобных сайтов чаще всего встречается CSS media max width.

Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек (breakpoints). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS, то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.

Вот пример, которым я часто пользуюсь (предполагая, что .related принимает форму боковой панели):

.content {
  width: 60%;
}

.related {
  width: 40%;
}

@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

Такой подход при использовании со множеством компонентов может существенно увеличить объем CSS завершенного проекта. Но так как блочные элементы по умолчанию занимают 100% ширины родительского элемента, то разумнее было бы прописать все следующим образом:

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }

  .related {
    width: 40%;
  }
}

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

Есть несколько причин использования в CSS min width max width:

• Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width, но только временно;
• Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
• Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript.

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

Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

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

Другие элементы, которые в стандартном состоянии отлично смотрятся на маленьких экранах, нужно изменять лишь по необходимости для экранов большего размера. В таких случаях и применяется min-width.

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

Данная публикация представляет собой перевод статьи «Choosing between min-width and max-width media queries» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

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) {}

puzzleweb.ru