• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → CSS → Медиа запросы в CSS

Медиа запросы (@media CSS)

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

Примечание
Медиа запросы не делают несколько версий сайта для конкректных устройств, а позволяют сделать несколько вариантов дизайна за счет применения разных стилей. Сделать разные стили гораздо проще и дешевле, чем делать разные сайты.


Синтаксис CSS @Media

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

Где тип устройства может принимать следующие значения:

  • all - для всех типов устройств (по умолчанию используется это значение)
  • braille - для устройств Брайля (для чтения слепыми людьми)
  • embossed - для принтеров Брайля
  • handheld - для смартфонов или портативных устройств
  • print - для принтеров
  • projection - для проекторов
  • screen - для экранов компьютеров, планшетов, смартфонов и т.д.
  • speech - для речевых браузеров
  • tty - для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
  • tv - для телеэкранов

Примечание
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).



Логические операторы
  • and (и) - логическое И. С помощью него можно задать несколько условий и только при условии, что все они будут выполнены, тогда стиль будет применен
  • or (или) - логическое ИЛИ. Необходимо, чтобы хотя бы одно из условий выполнилось
  • not (не) - логическое отрицание. Условие стоящие за not должно не выполняться
  • only - скрыть правило @media от старых браузеров. Новые браузеры просто не заметят этот оператор

Примечание
Запятая воспринимается как оператор or.


Рассмотрим какие есть медиа особенности.

Медиа особенности
  • aspect-ratio (min-aspect-ratio, max-aspect-ratio) - определяет отношение ширины и высоты области просмотра
  • color (min-color, max-color) - определяет количество бит на цвет для устройства
  • color-index (min-color-index, max-color-index) - определяет количество цветов, которое устройство может отображать
  • device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) - определяет соотношение сторон экрана устройства через. Записывается через слэш
  • device-height (min-device-height, max-device-height) - определяет всю доступную высоту экрана устройства
  • device-width (min-device-width, max-device-width) - определяет всю доступную ширину экрана устройства
  • grid - отвечает за вывод у устройства. Бывает два вида: сеточный и точечный. Терминалы, дисплей телефона поддерживают только один шрифт, что равносильно значению 1.
  • height (min-height, max-height) - высота области просмотра
  • width (min-width, max-width) - ширина области просмотра
  • orientation ([landscape] | [portrait]) - определяет в каком положение находится экран (альбомном или портретном)
  • resolution (min-resolution, max-resolution) - определяет разрешение устройства вывода

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width.


Примеры с медиа запросами

Пример №1. Ограничение на максимальную ширину

@media screen and (max-width: 800px) { ... стили ... }

Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.



Пример №2. Задание диапазона на ширину

@media (max-width: 1024px) and (min-width: 640px) { ... стили ... }

Этот код только будет работать только в случае, если ширина экрана находится в диапазоне от 640 до 1024 пикселей.


Пример №3. Исключение диапазона

@media (min-width: 1024px), (max-width: 640px) { ... стили ... }

Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.


Пример №4. Исключение устройства

@media all and (not handheld) { ... стили ... }

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

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

<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)" href="ссылка_на_стиль"> Например: <link rel="stylesheet" media="only screen and (max-width: 800px)" href="mob_style.css">


Читайте также:
• Адаптивная верстка сайта
• Свойство display
• Свойство transform
• Свойство transform-origin
• Свойство border
• Свойство background
• Свойство transition
• Свойство nth-child
• Свойство overflow
• Свойство box-shadow

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru