на 30 пикселей * /
@media only screen и (max-width: 600px) {
div.example {
размер шрифта: 30 пикселей;
}
}

Попробуй сам »

---

CSS @media Ссылка

Для полного обзора всех типов и функций / выражений медиа, пожалуйста, посмотрите Правило @media в нашем справочнике CSS.

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

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

Медиа-запросы используются для следующего:

Примечание: Примеры на этой странице используют CSS @media в иллюстративных целях, но основной синтаксис остается одинаковым для всех типов медиа-запросов.

Синтаксис

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

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

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

Типы носителей

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

все

Подходит для всех устройств.

печать

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

экран

В основном предназначен для экранов.

речь

Предназначен для синтезаторов речи.

Устаревшие типы носителей: CSS2.1 и Media Queries 3 определили несколько дополнительных типов носителей ( tty , tv , projection , handheld , braille , с тиснением и с ушным ), но они устарели в Media Queries 4 и не должны использоваться.Тип aural был заменен на Speech , который аналогичен.

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

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

Имя	Резюме	Банкноты
любое наведение	Позволяет ли какой-либо доступный механизм ввода наводить курсор на элементы?	Добавлено в Media Queries Level 4.
любой указатель	Есть ли какой-либо доступный механизм ввода как указывающее устройство, и если да, то насколько он точен?	Добавлено в медиа-запросы уровня 4.
соотношение сторон	Соотношение ширины и высоты области просмотра
цвет	Число битов на компонент цвета устройства вывода или ноль, если устройство не цветное
цветовая гамма	Приблизительный диапазон цветов, поддерживаемых пользовательским агентом и устройством вывода	Добавлено в Media Queries Level 4.
индекс цвета	Число записей в поисковой таблице цветов устройства вывода или ноль, если устройство не использует такую ​​таблицу
Соотношение сторон устройства	Соотношение ширины и высоты устройства вывода	Не рекомендуется в медиа-запросах уровня 4.
высота устройства	Высота поверхности рендеринга устройства вывода	Не рекомендуется для медиа-запросов уровня 4.
ширина устройства	Ширина поверхности рендеринга устройства вывода	Не рекомендуется в медиа-запросах уровня 4.
режим отображения	Режим отображения приложения, указанный в манифесте веб-приложения display member	Определено в спецификации манифеста веб-приложения.
принудительные цвета	Определить, ограничивает ли пользовательский агент цветовую палитру	Добавлено в Media Queries Level 5.
сетка	Использует ли устройство сетку или растровый экран?
высота	Высота области просмотра
наведение	Позволяет ли основной механизм ввода пользователю наводить курсор на элементы?	Добавлено в медиа-запросы уровня 4.
инвертированных цветов	Инвертируют ли цвета пользовательский агент или базовая ОС?	Добавлено в Media Queries Level 5.
монохромный	Бит на пиксель в буфере монохромных кадров устройства вывода или ноль, если устройство не монохромное
ориентация	Ориентация области просмотра
блок переполнения	Как устройство вывода обрабатывает содержимое, которое выходит за пределы области просмотра по оси блока?	Добавлено в Media Queries Level 4.
встроенный переполнение	Можно ли прокручивать содержимое, которое выходит за пределы области просмотра вдоль встроенной оси?	Добавлено в медиа-запросы уровня 4.
указатель	Является ли основной механизм ввода указательным устройством, и если да, то насколько он точен?	Добавлено в медиа-запросы уровня 4.
предпочитает цветовую схему	Определить, предпочитает ли пользователь светлую или темную цветовую схему	Добавлено в Media Queries Level 5.
предпочитает контраст	Определяет, запросил ли пользователь систему увеличения или уменьшения контрастности между соседними цветами	Добавлено в медиа-запросы, уровень 5.
предпочитает уменьшенное движение	Пользователь предпочитает меньше движения на странице	Добавлено в медиа-запросы уровня 5.
предпочитает пониженную прозрачность	Пользователь предпочитает пониженную прозрачность	Добавлено в Media Queries Level 5.
разрешение	Плотность пикселей устройства вывода
сканирование	Процесс сканирования устройства вывода
скрипты	Определяет, доступен ли скрипт (например, JavaScript)	Добавлено в медиа-запросы уровня 5.
обновить	Как часто устройство вывода может изменять внешний вид контента	Добавлено в Media Queries Level 4.
ширина	Ширина области просмотра, включая ширину полосы прокрутки

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

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

и

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

не

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

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

только

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

, (запятая)

Запятые используются для объединения нескольких медиа-запросов в одно правило. Каждый запрос в списке, разделенном запятыми, обрабатывается отдельно от других. Таким образом, если любой из запросов в списке верен, весь оператор мультимедиа возвращает истину. Другими словами, списки ведут себя как логические операторы или .

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

 @media print {...} 

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

 @media screen, print {...} 

Список всех типов носителей см. В разделе «Типы носителей». Поскольку они описывают устройства очень широко, доступны лишь некоторые из них; для нацеливания на более конкретные атрибуты используйте вместо этого медиа-функции .

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

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

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

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

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

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

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

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

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

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

В предыдущем примере мы уже видели операторы и , используемые для группировки носителя типа с функцией носителя . Оператор и также может объединить несколько мультимедийных функций в один мультимедийный запрос. Оператор , а не , тем временем отрицает медиа-запрос, в основном меняя его обычное значение.Оператор only не позволяет более старым браузерам применять стили.

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

Объединение нескольких типов или функций

Ключевое слово и объединяет медиа-функцию с типом медиа или другими медиа-функциями.В этом примере объединены две мультимедийные функции, чтобы ограничить стили для устройств с альбомной ориентацией и шириной не менее 30 ems:

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

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

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

Тестирование множественных запросов

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

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

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

Обращение значения запроса

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

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

… так что вышеупомянутый запрос оценивается так:

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

… а не так:

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

В качестве другого примера приведем следующий медиа-запрос:

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

… оценивается так:

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

Улучшение совместимости со старыми браузерами

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

 @media only screen and (color) {...}
 

Улучшения синтаксиса на уровне 4

Спецификация Media Queries Level 4 включает некоторые улучшения синтаксиса, чтобы сделать медиа-запросы с использованием функций, которые имеют тип «диапазон», например ширину или высоту, менее подробными. Уровень 4 добавляет контекст диапазона для написания таких запросов. Например, используя функциональность max- для ширины, мы можем написать следующее:

Примечание: Спецификация Media Queries Level 4 имеет разумную поддержку в современных браузерах, но некоторые функции мультимедиа не поддерживаются должным образом.См. Более подробную информацию в таблице совместимости браузера @media .

 @media (max-width: 30em) {...} 

В Media Queries Level 4 это можно записать как:

 @media (width <= 30em) {...} 

Используя min- и max- , мы можем проверить ширину между двумя значениями, например:

 @media (min-width: 30em) и (max-width: 50em) {...} 

Это преобразовало бы в синтаксис уровня 4 как:

 @media (30em <= width <= 50em) {...}
 

Media Queries Level 4 также добавляет способы комбинировать медиа-запросы с использованием полной логической алгебры с и , не и или .

Отрицание признака с помощью , а не

Использование not () вокруг медиа-функции отменяет эту функцию в запросе. Например, not (hover) будет соответствовать, если устройство не имеет возможности зависания:

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

Тестирование нескольких функций с или

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

 @media (not (color)) или (hover) {...}
 

См. Также

CSS3 Media Queries - Web Designer Wall

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

CSS3 Media Queries (демонстрация)

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

Макс.ширина

Следующий CSS будет применяться, если область просмотра меньше 600 пикселей.

  @media screen and (max-width: 600px) {
  .класс {
    фон: #ccc;
  }
}
  

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

Мин. Ширина

Следующий CSS будет применяться, если область просмотра больше 900 пикселей.

  @media screen и (min-width: 900px) {
  .класс {
    фон: # 666;
  }
}
  

Множественные медиа-запросы

Вы можете комбинировать несколько медиа-запросов. Следующий код будет применяться, если область просмотра составляет от 600 до 900 пикселей.

  @media screen and (min-width: 600px) and (max-width: 900px) {
  .класс {
    фон: # 333;
  }
}
  

Ширина устройства

Следующий код будет применяться, если максимальная ширина устройства равна 480 пикселей (например, дисплей iPhone).Примечание: max-device-width означает фактическое разрешение устройства, а max-width означает разрешение области просмотра.

  @media screen and (max-device-width: 480px) {
  .класс {
    фон: # 000;
  }
}
  

для iPhone 4

Следующая таблица стилей предназначена специально для iPhone 4 (предоставлено Томасом Майером) .

для iPad

Вы также можете использовать медиа-запрос для определения ориентации (книжная или ландшафтная) на iPad (кредиты: Cloud Four) .

Медиа-запросы для Internet Explorer

К сожалению, медиа-запросы не поддерживаются в Internet Explorer 8 и старше.Вы можете использовать Javascript для взлома. Ниже приведены некоторые решения:

Примеры участков

Вам необходимо просматривать следующие сайты в браузере, который поддерживает медиа-запросы, например Firefox, Chrome и Safari. Перейдите на каждый сайт и посмотрите, как макет реагирует на размер окна вашего браузера.

Hicksdesign

• Большой размер: Боковая панель с 3 колонками
• Меньше: Боковая панель из 2 столбцов (средний столбец переходит в левый)
• Еще меньше: Боковая панель в 1 столбец (правый столбец смещен вверх под логотипом)
• Наименьшее: без боковой панели (логотип и правый столбец сдвигаются вверх, а остальные столбцы боковой панели перемещаются вниз)

Колли

Макет переключается между одним столбцом, 2 столбцами и 4 столбцами в зависимости от области просмотра вашего браузера.

A List Apart

• Большой размер: навигация вверху, 1 ряд изображений
• Средний размер: навигация слева, 3 столбца изображений
• Маленький размер: навигация вверху, без фонового изображения на логотипе, 3 столбца изображений

Тройник Галерея

Этот очень похож на предыдущий пример Colly, но разница заключается в том, что изображения TeeGallery изменяют размер по мере растяжения макета.Уловка здесь заключается в использовании относительного процентного значения вместо фиксированного пикселя (например, ширина = 100%).

Заключение

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

медиа-запросов | HTML Dog

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

 
@media screen {

    body {font: 12px arial, sans-serif}
    #nav {display: block}

}
  

CSS для конкретного размера браузера

Чтобы расширить предыдущий пример, таргетингом может быть не только экранный носитель, но и экранный носитель определенного размера :

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

    #content {width: 100%}

}
  

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

Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

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

 
@media screen и (max-width: 1000 пикселей) {

    #content {width: 100%}

}

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

    #nav {float: none}

}

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

    #content aside {
        float: нет;
        дисплей: блок;
    }

}
  

Обратите внимание, что если, например, область макета имеет ширину 600 пикселей или меньше, будут применены все три из них (поскольку они будут меньше или равны 1000 пикселей, 800 пикселей и 600 пикселей).

Помимо использования общей max-width в области основного контента (элементы article ), этот сайт также имеет ряд правил CSS, зависящих от размера. Если вы можете это сделать, попробуйте изменить размер браузера, чтобы изменения вступили в силу.

Вы также можете использовать «min-width» вместо «max-width», если вы хотите сделать что-то наоборот и применить CSS к размерам, равным или более определенной длины.

Ориентационный CSS

Если вы хотите применить CSS в зависимости от ориентации браузера, заполните свои ботинки чем-то вроде следующего:

 
  @media screen и (ориентация: альбомная)  {

    #nav {float: left}

}

  @media screen и (ориентация: книжная)  {

    #nav {float: none}

}
  

Это может быть особенно полезно для мобильных устройств…

CSS для конкретного устройства

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

«Портативный» тип носителя действительно существует, и его можно было бы использовать как @media handheld … но он не широко поддерживается, и различие между «портативным» стало размытым из-за распространения всевозможных устройств с всевозможные размеры экрана.

Ширина и высота

device-width , device-height , min-device-width , max-device-width , min-device-height и max-device-height можно использовать для нацеливания на расчетное разрешение устройства:

 
@media screen и (min-device-height: 768px) и (max-device-width: 1024px) {

    / * Вы можете применить множество условий, разделенных "и" * /

}
  

Соотношение пикселей

Важно помнить, что пиксель CSS не обязательно должен совпадать с физическим пикселем .Хотя экран может физически иметь ширину 720 пикселей, браузер может фактически применять CSS, если, например, он имеет ширину 480 пикселей. Это сделано для того, чтобы стандартная веб-страница с большей вероятностью поместилась на экране. В этом примере соотношение пикселей и составляет 1,5: 1: на каждый пиксель CSS приходится 1½ физических пикселя. Стандартный настольный монитор будет иметь соотношение пикселей 1: 1: один пиксель CSS на каждый физический пиксель.

Если вы хотите применить стили только к этим устройствам, вы можете использовать что-то вроде:

 
@media (device-pixel-ratio: 2) {

    body {background: url (twoasbig.png)}

}
  

Это применимо к подобным iPhone (4 и выше) с соотношением пикселей 2: 1. Вы также можете использовать min-device-pixel-ratio и max-device-pixel-ratio .

Говоря об iPhone, вы знаете сделку: также используйте -webkit-device-pixel-ratio и т. Д. И т. Д.

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

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

Веб-сайт HTML Dog использует этот подход: вместо того, чтобы маленькое устройство пыталось визуализировать большую и более толстую веб-страницу, уменьшая ее, CSS превращает ее в дизайн с одним столбцом, созданный специально для такого устройства.

Прочие

Вы также можете применять стили в зависимости от разрешения устройства:

 
@media экран и (разрешение: 326 точек на дюйм) {/ * * /}

@media screen и (минимальное разрешение: 96 точек на дюйм) {/ * * /}
  

Или по соотношению сторон:

 
@media screen и (соотношение сторон устройства: 16/9) {/ * * /}
  

Минутку...

Пожалуйста, включите куки и перезагрузите страницу.

Это автоматический процесс. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.

Подождите до 5 секунд…

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [ ] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] ) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + ( !! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (! ! []) - []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + ( ! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! [ ]) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + []) + ( ! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) +! ! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (! ! []) + !! [] + !! []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! [ ]) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) - []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) - []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [ ])) / + ((! + [] + (!! []) + !! [] + !! [] + []) + (+ !! []) + (+ !! []) + ( ! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! [] ) - []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] +! ! [] + !! [] + !! [] + !! []) + (! + [] - (!! [])) + (! + [] + (!! []) + !! [ ] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [ ] + !! [] + !! [])) / + ((+ !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (+

CSS 3 medya sorguları | Fatih Hayrioğlu’nun not defteri

Mobil sektörün hızla ilerlemesi ve akıllı araçlar pazarının büyümesi ile insanlar mobil araçlar için ayrı web siteleri yapmaya başladı ve bu şekilde devam ediyor.Веб-сайтыi olan bir şirketin mobil için ayrı bir site yapması gerek iş ve gerekse düzenleme açısından sorunları olan bir система. Medya sorguları bu anlamda bir ihtiyaç için ortaya çıkmış bir özelliktir.

Herkesin istediği bir özellik olarak her çözünürlükte ve araçta uygun web siteleri üretmektir. Bunun için medya sorguları bizeardım sağlar.

Daha önce medya sorgularını yazıcıdan çıktı alırken web sitelerimizin çıktı almaya müsait hale getirmek için kullanmıştık. CSS3 ile birlikte medya sorgularında kullanabileceğimiz medya özellikleri экленди.

Yeni nesil medya sorgularını Firefox, Webkit, Opera и Интернет Explorer9’dan itibaren desteklemektedir. İnternet Explorer’un eski sürümler için javascript ile çözüm üretilir.

Daha önceki makalemde bahsettiğim gibi medya sorgularının en basit хали

veya

  @media ornek.css экран;  

şeklindedir.

Medya sorguları bir veya daha fazla tipe göre sorgulama yapar ve sorgunun doğruluğuna göre o css dosyasını uygular.

Медиа Типлери

экран	Bilgisayarda görüntüleme
терминал	Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntüleme
телевизор	Televizyonda görüntüleme
выступ	Projeksiyonda görüntüleme
портативный	Taşınabilir telefonlar ve PDA’ler
печать	Yazıcı çıktılarında görüntüleme
шрифт Брайля	Брайлевский документсал окуюкуларда
все	Tüm araçlarda görüntüleme
тисненая	Язык Брайля çıktıları için
слуховой	Ses sentez birimlerinde kullanılır

Mantıksal Operatörler

Medya sorgularımızda not, and ve only mantıksal operatörlerini kullanabiliriz.

и İki veya daha fazla medya özelliğini birbirine bağlar. Sorgudaki tüm medya özelliklerinin doğru olması durumunda css dokümanın uygulanmasını sağlar. Örnein (цвет) и (ориентация: альбомная) и (минимальная ширина устройства: 800 пикселей) tanımı; Görüntüleyen aracın renkli, yatayda ve en az 800px genişliğinde ise css dokümanı uygulanır.

  @media (min-width: 450px) и (max-width: 950px)  

Bu durumda ise; genişliği en az 450px ve en fazla 950px olan araçlarda uygulanır.

не Sorguya negatif ifade katar. Sonuç eğer doğru ise css dosyası уйгуланмаз.

  @media, а не экран, а (цветной)  

Bilgisayar ve renkli ekran olmayan durumlarda uygulanır.

только Sadece bu şartlar geçerli olduğunda uygula anlamınadır.

  @media only screen and (color) {
body {
фон: синий
}
}  

Sadece bilgisayar ve renkli ekranlar olduğunda css dokümanı uygulanır.