Лучшее руководство по CSS3 Media Queries в 2024 году. В этом руководстве вы можете изучить Типы CSS2 СМИ,CSS3 Media Queries,Поддержка браузеров,Синтаксис запросов Мультимедиа,Типы CSS3 медиа,Простые примеры мультимедийного запроса,CSS3 ссылка @media,
@media
правило описано в CSS2, и могут быть настроены для различных типов мультимедийных данных различных правил стиля.
Например: Вы можете установить различные правила стилей для различных типов носителей (в том числе дисплеев, портативных устройств, телевизоров и т.д.).
Но эти типы мультимедиа поддерживают на многих устройствах еще достаточно дружелюбными.
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 тип веб-браузера, ключевое слово встречается только игнорирует этот файл стиля.
все: все устройства, это должно всегда видеть.
Вы можете также использовать различные файлы стилей на различных носителях:
значение | описание |
---|---|
все | Используется для всех типов мультимедийных устройств |
печать | Для принтеров |
экран | Для экранов компьютеров, планшетов, смартфонов. |
речь | Для чтения с экрана |
Использование мультимедийных запросов может быть использован для замены оригинальный стиль, соответствующий стилю на указанном устройстве.
Следующие примеры изменения цвета фона на экране видимого размера окна больше, чем 480 пикселей оборудования:
Следующие примеры будут видны в окне размером экрана больше, чем 480 пикселей будет плавать на страницу меню слева:
Откройте для себя больше мультимедийного контента может ссылаться @media правила.