Справочник CSS. Директива / правило @media в CSS: тип устройств и мониторов.
Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml
Официальный паблик в ВК: https://vk.com/zametkinapolyah
Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov
Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkinapolyahru
Помощь проекту:
WMR: R288272666982
WMZ: Z293550531456
Яндекс.Деньги: 410011531129223
Задача адаптации веб-сайтов для людей с ограниченными возможностями актуальна и по сей день и решается довольно медленно (возможно потому, что не приносит особых выгод разработчикам), а вот фетиш вокруг «адаптивного дизайна» или «адаптивные веб-страницы» появился недавно с развитием мобильных устройств, сейчас даже чайник или часы можно подключить к сети Интернет.
Разработчик обычно ваяет макет на устройстве с большим дисплеем, например, ноутбук или настольный ПК, а вот посетители заходят на сайты с различных устройств, в том числе и с небольшими или маленькими дисплеями, таких посетителей становится много, поэтому появился еще один способ содрать бабла с заказчика (что не так уж и плохо, хотя никто специально этот «адаптивный дизайн» зачастую не рисует) – сделать адаптивный дизайн, который на самом деле никому не нужен, хотя поговаривают, что Гугл и Яндекс дают кармический бонус сайтам, у которых адаптивный дизайн есть.
По вышеназванным причинам в CSS можно указать тип устройства или тип носителя, на котором будет открыта или напечатана веб-страница. Устройств довольно много, полное описание типов носителей в CSS смотрите в справочнике.
Когда мы разрабатываем CSS код, то можем пользоваться директивами @import и @media, эти правила позволяют изменять или уточнять тип носителя, тем самым определяя стили элемента и то, как он будет отображаться на том или ином устройстве.
Директиву @import мы рассмотрели ранее, давайте теперь поговорим о правиле @media. Данная директива доступна для глобальных и связанных стилей и имеет следующий синтаксис:
@media тип устройства {
Блок стилей для этого устройства
}
@media другой тип устройства{
Стили, которые будут применяться на этом устройстве
}
Типы носителей или типы устройств можно перечислять через запятую, можно указать хоть все сразу. Также стоит заметить, что у тега link есть атрибут media, который позволяет указать тип устройства, для которого будет загружаться таблица стилей, доступная по пути href. Атрибут media доступен и для тега style.
all – любое устройство, данное значение является значением по умолчанию.
aural – программы голосового воспроизведения, например, речевые браузеры.
braille – устройства системы брайля.
handheld – КПК, смартфоны и другие.
print – принтеры и другие печатающие устройства.
projection – проекторы.
screen – экран монитора.
tv – телевизор.
Кирилл Антонов
Канал для начинающего веб-разработчика. Здесь ты найдешь различные видео уроки о технологиях и программном обеспечение, которые используют веб-разработчики.
Последние сообщения
127 полезных и бесплатных онлайн академий
25.04.2019
Ресурсы для objective-C программистов
21.03.2018