Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Media запросы в css

Медиа-запросы, css-правило @media

http://belarusweb.net

Основы создания сайтов

Если возникает необходимость указать типы носителей, а также особые условия, для которых будет применяться данная таблица стилей, нужно использовать правило @media (см. пример 6.3). Синтаксис данного правила имеет вид: @media тип_носителя_1, тип_носителя_2,... and|not|only (медиа_особенности) {стили для этих типов}.

Типы носителей мы уже перечисляли в ходе изучения HTML, когда рассматривали атрибут media служебного элемента 'link'. Перечислим их еще раз:

'all' – все устройства (применяется по умолчанию);
'aural' – синтезаторы речи и звука;
'braille' – устройства, использующиеся слепыми людьми (основаны на системе Брайля);

'embossed' – принтеры, использующие для печати систему Брайля;
'handheld' – смартфоны, планшеты и другие устройства с малой шириной экрана;
'print' – принтер (так будет выглядеть страница на бумаге);
'screen' – экран монитора;
'speech' – речевые браузеры;
'projection' – проектор;
'tty' – терминалы и другие портативные устройства с ограниченными возможностями экрана.
'tv' – телевизор.

/* Данный класс будет применен в ходе печати страницы или вывода на экран компьютерного терминала */ @media print, tty{ .myColor_1{ color: black; } } /* Этот класс будет применен, если это экран монитора и ширина области просмотра устройства не превышает 1300px */ @media screen (max-width: 1300px){ .myColor_2{ color: green; } } /* Этот класс будет применен ко всем типам устройств, если ширина области просмотра устройства не меньше 1301px, а соотношение ширины и высоты области просмотра не менее 3/4 */ @media (min-width: 1301px) and (min-aspect-ratio: 3/4){ .myColor_3{ color: red; } } /* Этот класс будет применен либо для всех устройст, кроме экрана монитора, у которых ширина области просмотра не менее 1000px, либо для экрана монитора в ландшафтном режиме просмотра */ @media not screen and (min-width: 1000px), screen and (orientation: landscape){ .myColor_4{ color: blue; } } /* Этот класс не будет применен к старым браузерам */ @media only screen and (min-width: 1000px){ .myColor_5{ color: yellow; } }

Пример 6.3. Использование правила @media

Помимо указания типа устройств, для которых должен выполняться тот или иной стиль, дополнительно разрешается задавать одно из допустимых медиа-особенностей устройств:

'aspect-ratio' – определяет соотношение ширины и высоты отображаемой области просмотра устройства (не путать с размерами всего экрана). Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слэшем '/' (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения 'min-aspect-ratio' или максимально допустимого 'max-aspect-ratio'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
'color' – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на цвет для устройства. Например, если задано число 3, то это означает, что таблица стилей будет применена к устройству, в котором красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось цветным. Также разрешается использовать префикс и задавать условие в виде 'min-color' и 'max-color'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.

'color-index' – задается в виде положительного целого числа, которое определяет количество цветов, которое поддерживает устройство (например, 256). Разрешается использовать префикс и задавать условие в виде 'min-color-index' и 'max-color-index'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
'device-aspect-ratio' – определяет соотношение ширины и высоты всего экрана устройства. Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слэшем '/' (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения 'min-device-aspect-ratio' или максимально допустимого 'max-device-aspect-ratio'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.

'device-height' – определяет всю доступную высоту экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде 'min-device-height' и 'max-device-height'. Данная особенность используется для всех устройств кроме speech.
'device-width' – определяет всю доступную ширину экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде 'min-device-width' и 'max-device-width'. Данная особенность используется для всех устройств кроме speech.
'grid' – определяет, что данное устройство относится к типу с фиксированным размером символов (например, некоторые виды терминалов или телефонов). В таком устройстве символы выстраиваются по заданной сетке и имеют одинаковую ширину и высоту. Отметим, что для подобных устройств следует использовать относительные единицы, а не пикселы. Данная особенность используется для всех устройств и значений не принимает.
'height' – определяет доступную высоту отображаемой области (например, высоту окна браузера). Разрешается использовать префикс и задавать условие в виде 'min-height' и 'max-height'. Данная особенность используется для всех устройств кроме speech.
'monochrome' – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на пиксель для устройства с монохромным выводом. Например, если задано число 8, то это означает, что таблица стилей будет применена к устройству, способному отображать 256 оттенков своего цвета. Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось монохромным. Разрешается использовать префикс и задавать условие в виде 'min-monochrome' и 'max-monochrome'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.

'orientation' – определяет, в каком режиме просмотра находится дисплей: landscape (ландшафтный режим, в котором ширина дисплея больше его высоты) или portrait (портретный режим, в котором высота дисплея больше его ширины). Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
'resolution' – определяет разрешение (плотность пикселей) устройства вывода. В качестве значений принимает число точек на дюйм (например, 300dpi) или точек на сантиметр (например, 300dpcm). Данная особенность используется для устройств: handheld, print, projection, screen, и tv.
'scan' – определяет тип развертки телевизора: interlace (череcстрочная) или progressive (прогрессивная). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, а затем чётные. Это позволяет сократить передаваемые данные по сравнению с прогрессивной развёрткой, при которой кадр передаётся и показывается целиком.
'width' – определяет доступную ширину отображаемой области (например, ширину окна браузера). Разрешается использовать префикс и задавать условие в виде 'min-width' и 'max-width'. Данная особенность используется для всех устройств кроме speech.

Что касается логических операторов and (и), а также not (не), то они предназначены для составления более сложных условий. Применять их можно как перед типом устройства, так и перед медиа-особенностями. При этом следует помнить, что оператор not имеет наименьший приоритет, а вместо логического оператора or (или) используется обычная запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно из условий выполняется, то стиль будет применён (см. пример 6.3).

Оператор only (только) применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Если же браузер поддерживает медиа-запросы, то оператор only просто игнорируется.

В конце добавим, что медиа-запросы можно использовать и непосредственно в элементе 'link', указав их в качестве значения атрибута media (см. пример 6.3).

@-правила
Медиа-запросы
Печать документа

▲

▼

Адаптивная верстка сайтов | Медиа-запросы

Медиа-запросы (Media Queries) — основной инструмент современного верстальщика сайтов, когда речь идет об адаптивной верстке. В двух словах медиа-запросы — это отдельные наборы правил в файле стилей CSS. Каждый из таких дополняющих наборов отвечает за тот или иной способ отображения сайта.

Например, за ширину окна конкретного девайса: настольного монитора, смартфона или планшета, а в случае с последними двумя также и за ориентацию в пространстве (альбомная или книжная или по-буржуйски landscape и portrait).

Принцип действия медиа-запросов

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

Причем не важно, на чем именно смотреть сайт: на смарфоне или настольном мониторе. На большом мониторе можно уменьшить окно браузера до размеров смартфона, и сайт точно также автоматически перестроится, словно вы его смотрите на мобилке. Достигается это за счет задания ряда простых наборов правил в файле CSS, дополняющих или исключающих действие других правил.

В самом простом виде медиа-запрос какбэ говорит: «Если окно браузера не более такого-то размера (задано в пикселях), то показывать сайт так-то и так-то… ».

Пример:

@media screen and (max-width: 1000px) { #content { width: 75%; float: left; } #sidebar { width: 25%; float: right; }

}

Здесь медиа-запрос говорит, что если ширина экрана не более 1000 пикселей, то ширина основного блока (content) составит 75%, а ширина боковой колонки (sidebar) будет 25%. Надеюсь, все помнят, что в адаптивной верстке используется принцип «резиновой» разметки, поэтому все размеры в %, а не в пикселях.

Синтаксис медиа-запросов

Обратите внимание на синтаксис. Медиа-запрос — это типичный набор правил и заключен в фигурные скобки. Но в отличие от обычных правил CSS, в него могут входить другие наборы правил, также заключенные в фигурные скобки, причем друг от друга они никакими знаками не отделяются. Такой себе своеобразный вложенный дополнительный набор правил а ля «все в одном».

Словосочетание screen and следует читать так: «для всех устройств с цветным экраном И для тех, у кого экран меньше 1000 пикселей».

Позвольте, но ведь есть и гораздо меньшие устройства, как с этим быть? Очень просто! Пишем еще один медиа-запрос:

@media screen and (max-width: 480px) { #content { width: 100%; float: none; } #sidebar { width: 100%; float: none; }

}

Данный медиа-запрос говорит, что если ширина экрана окажется менее 480 пикселей, то сработает новый набор правил, где у обоих блоков ширина 100% и отменено обтекание. Очень удобно и наглядно.

Также очень легко можно настроить стили для отображения сайта в книжной или альбомной ориентации экрана. Например:

@media screen and (max-width: 320px) and (orientation: portrait) { #content { width: 75%; float: none; } #sidebar { width: 25%; float: none; }

}

@media screen and (max-width: 480px) and (orientation: landscape) { #content { width: 80%; float: none; } #sidebar { width: 20%; float: none; }

}

Эти два медиа-запроса говорят следующее: «Если экран не более 320 пикселей и расположен вертикально, то ширина основного блока составит 75%, а боковой колонки 25%. А если ширина не более 480 пикселей и расположение горизонтальное, то соответственно 80% и 20%.

То есть, во втором случае под основной блок выделено чуть больше места, что бывает удобно при чтении текста.

Кроме того, в медиа-запросе можно устанавливать диапазон ширины экрана от минимального до максимального:

@media screen and (min-width: 200px) and (max-width: 480px) { #content { width: 80%; float: none; } #sidebar { width: 20%; float: none; }

}

Данная запись говорит, что набор правил этого медиа-запроса будет работать на устройствах (или при размере окна браузера настольного монитора) от 200 до 480 пикселей. Если будет больше или меньше, то правила не сработают. Иногда удобнее задавать именно диапазон действия медиа-запроса.

Характеристики медиа-запросов

Медиа-запросы могут содержать достаточно разнообразный набор всяческих характеристик помимо ширины экрана. Это такие плюшки, как:

height — высота области просмотра;
device-width — ширина поверхности, на которой происходит просмотр (т.е. непосредственно ширина экрана конкретного девайса);
device-height — высота поверхности, на которой происходит просмотр;
orientation — ориентация экрана устройства (книжная или альбомная);
aspect-ratio — соотношение ширины и высоты в зависимости от ширины и высоты области просмотра. Например, широкоэкранный дисплей с соотношением сторон 16:9 может быть указан, как aspect-ratio: 16/9;
color — количество бит на каждый из цветовых компонентов. Например, min-color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета;
и др.

На практике чаще всего используется только значение ширины области просмотра — width. Остальные характеристики пока еще экзотика. Есть некоторая разница между width и device-width. Об этом я, пожалуй, напишу отдельный пост, чтобы не перегружать тему. Скажу лишь, что использование device-width бывает полезным, когда ориентируешься на конкретный девайс. Фишка тут вот в чем:

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

В результате, если вы в медиа-запросе зададите набор правил @media screen and (max-width: 480px), используя простой width, то на смартфоне все равно увидите сайт так, словно он просматривается на большом мониторе, только все будет очень мелким.

Происходит такая нестыковка как раз по причине «запаса» браузера мобильного устройства. Чтобы этого не случилось, нужно использовать в медиа-запросе не просто width, а именно device-width. Либо применять такую штуку как мета-тег viewport, но об этом в следующий раз.

Где лучше всего размещать медиа-запросы?

Как и любая часть файла стилей, медиа-запросы подчиняются тем же правилам, что и все остальные. То есть, порядок следования никто не отменял.

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

Можно, конечно, использовать для вставки медиа-запросов команду @import, подгружая дополнительный файл стилей, но делать это нецелесообразно, т.к. уменьшает скорость загрузки сайта и не всегда корректно работает.

Как изменить html разметку в медиа-запросе

Нет ничего проще! Обычно медиа-запросы размещаются в том же файле стилей CSS, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл.

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

На этом по медиа-запросам все. Демо-сайт в качестве примера будет разобран в одной из ближайших статей. Так что оставайтесь на связи! И пишите вопросы в комментариях.

Адаптивная верстка сайтов | Введение Адаптивная верстка сайтов | Медиа-запросы

Адаптивная верстка сайтов | Сначала мобильные

Автор: Игорь Квенторwww.websovet.com

Media Queries: как использовать медиа-запросы — учебник CSS

Такое понятие, как медиа-запросы, появилось в CSS3. С их помощью можно определять внешний вид веб-страниц, опираясь на ширину и высоту окна браузера. Благодаря медиа-запросам вы можете параллельно создавать стили для небольших мобильных телефонов, планшетов, лэптопов и мониторов с большой диагональю.

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

Когда использовать медиа-запросы?

Как правило, для адаптации дизайна веб-страницы необходимо прописать ряд CSS-стилей для определенных элементов. Ниже мы перечислим наиболее частые сценарии, когда вам понадобится обратиться к медиа-запросам.

Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:

/* ------------------------------------------ */ /* ----- От маленьких экранов к большим ----- */ /* ------------------------------------------ */ /* Стили для очень маленьких экранов (телефоны в книжной ориентации, дисплей менее 576 пикселей). Записываются без медиа-запросов, поскольку в Bootstrap это значение по умолчанию */ /* Стили для маленьких экранов (телефоны в альбомной ориентации, дисплей 576 пикселей и более) */ @media (min-width: 576px) { ... } /* Стили для средних экранов (планшеты, дисплей 768 пикселей и более) */ @media (min-width: 768px) { ... } /* Стили для больших экранов (ПК, дисплей 992 пикселей и более) */ @media (min-width: 992px) { ... } /* Стили для очень больших экранов (ПК с большим монитором, дисплей 1200 пикселей и более) */ @media (min-width: 1200px) { ... } /* ------------------------------------------ */ /*------ От больших экранов к маленьким ------*/ /* ------------------------------------------ */ /* Стили для очень больших экранов (дисплей 1200 пикселей и более). Записываются без медиа-запросов, так как контрольная точка для очень больших экранов не имеет верхней границы по ширине */ /* Стили для больших экранов (дисплей максимум 1199 пикселей) */ @media (max-width: 1199px) { ... } /* Стили для средних экранов (дисплей максимум 991 пикселей) */ @media (max-width: 991px) { ... } /* Стили для маленьких экранов (дисплей максимум 767 пикселей) */ @media (max-width: 767px) { ... } /* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */ @media (max-width: 575px) { ... }

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:

/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */ @media (max-width: 575px) { ... } /* Стили для маленьких экранов (дисплей шириной от 576 пикселей до 767 пикселей) */ @media (min-width: 576px) and (max-width: 767px) { ... } /* Стили для средних экранов (дисплей шириной от 768 пикселей до 991 пикселей) */ @media (min-width: 768px) and (max-width: 991px) { ... } /* Стили для больших экранов (дисплей шириной от 992 пикселей до 1199 пикселей) */ @media (min-width: 992px) and (max-width: 1199px) { ... } /* Стили для очень больших экранов (дисплей минимум 1200 пикселей) */ @media (min-width: 1200px) { ... }

Mobile First или Desktop First?

Когда вы пишете стили для контрольных точек, вы не создаете весь дизайн с нуля, а лишь корректируете существующую верстку. Возникает вопрос, под что верстать изначально: под настольные компьютеры с последующей корректировкой под мобильные устройства или же наоборот — сначала создать версию для небольших экранов, а затем расширить ее? Рассмотрим оба подхода.

Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media.
Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

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

Синтаксис медиа-запросов

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:

@media (min-width: 576px) { /* здесь будут CSS-стили */ }

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:

@media (min-width: 576px) { .column { width: 100%; } h2 { font-size: 24px; } /* и так далее... */ }

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана (min-width), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width, тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.

Далее в учебнике: принцип создания гибкой сетки в CSS.