Пишем медиа запросы css - это просто
Медиа-запросы.
Из названия можно подумать, что медиа-запросы эта работа с медиа
файлами, но это более интересная тема. Медиа-запросы это свойства которые
помогают адаптировать наш сайт под разный размер экрана, от мобильного
телефона до экрана телевизора.
Рассмотрим пример. У нас есть веб-страничка с текстом. На компьютере этот
текст видно хорошо, но как же быть с пользователями смартфонов. На
смартфоне этот текст будет мельче и не приятен для чтения. На помощь в
этой ситуации к нам приходят медиа запросы.
@media only screen and (min-device-width: 300px) {
.text{font-size: 45px;}
}
@media only screen and (min-device-width: 600px) {
.text{font-size: 25px;}
}
Таким образом, повышение уровня гражданского
сознания представляет собой интересный эксперимент проверки
существующих финансовых и административных условий.
Медиа-запрос имеет более сильный приоритет чем у обычного стиля, и
задавая в нашем случае для экрана в 300px размер текса нужно задать размер
текста и для экрана в 600px, иначе текст будет размеров в 45px для всех
экранов начиная с 300px.
В данном случае мы использовали запись min-device-width. Она означает что
стили будут применяться с заданного размера экрана.
min-device-width: 300px стиль сработает от 300px и более.
Так же существует запись max-device-width. Она означает что стили будут
применяться до заданного размера экрана.
max-device-width: 300px стиль сработает от 0 и до 300px.
@media only screen and (max-device-width: 400px) {
.text{font-size: 45px;}
}
@media only screen and (max-device-width: 900px) {
.text{font-size: 25px;}
}
Таким образом, повышение уровня гражданского
сознания представляет собой интересный эксперимент проверки
существующих финансовых и административных условий.
Как и ширину мы можем задать высоту в медиа-запросах min-height и max-
height.
Основные типы устройств:
all - все устройства (по умолчанию).
print - принтеры и режим предварительного просмотра страницы перед
печатью.
screen - устройства с дисплеями.
Логические операторы:
and – означает что будет выполнено несколько условий. Мы его
использовали в нашем примере.
@media only screen and (max-device-width: 400px)
not - предназначен для отрицания указанного условия. Имеет по отношению
к оператору and меньший приоритет, т.е. оператор not всегда выполняется
после and.
Существуют пять видов экранов:
устройства (до 576px) – устройства с маленьким экраном.
устройства (больше или равно 576px) - телефоны
устройства (больше или равно 768px) - планшеты
устройства (больше или равно 992px) - ноутбуки
устройства (больше или равно 1200px) – большие экраны
Можно использовать медиа-запросы для стандартных расширений экранов
или же можно использовать свои это не является ошибкой.
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
