Latest web development tutorials

CSS3 Media Queries

Типы CSS2 СМИ

@media правило описано в CSS2, и могут быть настроены для различных типов мультимедийных данных различных правил стиля.

Например: Вы можете установить различные правила стилей для различных типов носителей (в том числе дисплеев, портативных устройств, телевизоров и т.д.).

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


CSS3 Media Queries

CSS3 мультимедийный запрос наследует все типы CSS2 медиа мысль: Вместо того чтобы найти тип оборудования, настройки дисплея в соответствии с CSS3 адаптации.

запросы СМИ могут быть использованы для обнаружения много вещей, таких как:

  • видового экрана (окна) в ширину и высоту
  • Ширина и высота аппарата
  • К (смартфон экрана по горизонтали, по вертикали экран).
  • разрешение

В настоящее время многие для телефона Apple, Android телефон, планшет и другие устройства будут использоваться для отображения запроса.


Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии недвижимости.

свойство
@media 21,0 9.0 3.5 4.0 9.0

Синтаксис запросов Мультимедиа

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

@media not|only mediatype and (expressions) {
    CSS-Code;
}

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

Если вы не используете не только оператора или иначе, все стили будут адаптировать дисплей на всех устройствах.

  • нет: нельзя использовать для исключения определенных устройств, таких как @media не печатают (не печатное оборудование).

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

  • все: все устройства, это должно всегда видеть.

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



Типы CSS3 медиа

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

Простые примеры мультимедийного запроса

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

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

примеров

@media экран и (мин-ширина: 480px) {
тело {
фонового цвета: светло - зеленый;
}
}

Попробуйте »

Следующие примеры будут видны в окне размером экрана больше, чем 480 пикселей будет плавать на страницу меню слева:

примеров

@media экран и (мин-ширина: 480px) {
#leftsidebar {ширина: 200px; флоат: слева;}
#main {Левое поле: 216px; }
}

Попробуйте »

CSS3 ссылка @media

Откройте для себя больше мультимедийного контента может ссылаться @media правила.