CSS от А до Я создаем адаптивный дизайн с помощью медиа запросов


Содержание материала:

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

Медиа-запросы (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, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл.

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

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

Адаптивная верстка: media queries

Добрый день, уважаемые читатели!

Сегодня я бы хотел продолжить обсуждение адаптивной верстки.

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

На небольших экранах изображения будут слишком мелкими.

Как решить проблему? Media Queries!

Данную проблему можно решить благодаря новой возможности CSS: media queries.

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

В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса . >красным .

Таким образом мы может подстраивать наши стили под каждый экран в отдельности.

Условия для Media Queries

Условия можно задать следующие условия:

Лично я чаще всего использую первое условие.

Способы подключения CSS-таблиц

Так же можно добавлять условия, для каких экранов будет подключаться та или иная таблица стилей:

Практика

Давайте доработаем пример из прошлой статьи:

HTML

CSS

Что получилось? Смотрим: демонстрация 1

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.

Решим нашу проблему!

Добавляем Media Queries

Добавим в CSS следующий код:

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).

Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

Спасибо за внимание, жду вас в следующих статьях! Следующая статья: Адаптивная верстка: анимация

Подписывайтесь на рассылку ��

Что-то осталось неясным, неточным? Пишите в комментариях!

Автор статьи: Alex. Категория: CSS
Дата публикации: 16.12.2013

Основы адаптивной верстки. Медиа-запросы.

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

В первую очередь хотелось бы сказать, что такое адаптивность. Мы не будем приводить определения из википедии или ещё откуда-то, а скажем своими словами.

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

На изображении приведен пример отображения такого сайта.

Вернёмся к CSS и собственно самим media -запросам. Этот механизм является такое конструкцией, который позволяет задавать стили только для устройств с определенными параметрами.

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

Все медиа-запросы начинаются с @media , после чего идут условия проверки и в фигурных скобках CSS -стили, пример:

Как видите появились так же неизвестные значения, после @media . Далее мы приведем перечень и описание этих условий.

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

Табл. 1. Устройства и их описание

Тип Описание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
projection Проекторы.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

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

По мимо этого в медиа-запросах могут использоваться логические операторы.

and

Логическое И. Объединяет несколько условий, которые должны выполняться одновременно.

В первом примере как раз используется этот оператор.

not

Логическое отрицание(НЕ). Соответственно инвертирует одно из условий.

Пример, для всех типов устройств, кроме смартфонов:

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

Запятая служит для обозначения логического ИЛИ. Запрос срабатывает если выполняется хотя бы одно из указанных через запятую условий.

Пример, для телевизоров или проекторов:

only

Этот оператор ничего из себя не представляет и применяется лишь для того, чтобы медиа-запросы поддерживались старыми браузерами.

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

Пример, для мониторов или смартфонов:

По мимо выше указанных условий можно использовать медиа функции.

Они задают технические характеристики устройства, на котором смотрят сайт. Почти все такие функции имеют приставки min- и max-, которые соответствуют минимальному и максимальному значению для характеристики. Например min-height:200 , говорит о том, что бы стиль применялся к устройствам с высотой равной/более 200 px. А max-height:200 , для устройств с равной/меньшей высотой 200 пикселям.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — целое число /целое число.

Определяет соотношение ширины к высоте устройства. Значение задается в виде двух целых чисел, разделяемых слешем.

color (min-color, max-color)

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — целое число.

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.

color-index (min-color-index, max-color-index)

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — целое число.

Определяет количество цветов, которые должно поддерживать устройство.

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — целое число/целое число.

Определяет соотношение сторон экрана устройства. О тличается от aspect-ratio тем, что применяется относительно самого устройства а не видимой части.

device-height (min-device-height, max-device-height)

Типы устройств, к котором применяется — все кроме speech .

Определяет размер доступной высоты или печатной страницы. Задается числом, которое определяет количество пикселей.

device-width (min-device-width, max-device-width)

Типы устройств, к котором применяется — все кроме speech .

Определяет размер доступной ширины или печатной страницы. Задается числом, которое определяет количество пикселей.

grid

Типы устройств, к котором применяется — al l.

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

height (min-height, max-height)

Типы устройств, к котором применяется — все кроме speech .

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — целое число.

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

orientation

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — landscape | portrait .

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

resolution (min-resolution, max-resolution)

Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.

Значение — разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр).

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

scan

Типы устройств, к котором применяется — tv .

Значение — interlace | progressive .

Определяет тип развертки телевизора — чересстрочная (interlace) или прогрессивная (progressive ). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Типы устройств, к котором применяется — все кроме speec h.

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Руководство для новичков: простой адаптивный сайт при помощи CSS

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Топ-пост этого месяца:  Анонимные и самовыполняющиеся функции в JavaScript

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

В этом уроке мы рассмотрим основные принципы, лежащие в адаптивном веб-дизайне, для лучшего понятия этой техники. Затем, мы создадим адаптивный веб-сайт, который будет отлично масштабироваться на больших и малых экранах. Респонсивный веб-дизайн стал очень популярным, когда все больше и больше людей используют мобильные устройства, такие как iPhone, iPad, BlackBerry, а также другие смартфоны и планшеты с доступом к интернету.


Важно понимать, что сайт не должен быть построен под конкретный рабочий стол или мобильное устройство. Здесь важна способность макета адаптироваться под различные размеры.

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

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

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

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

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:

CSS

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

Ваше изображение будет отображаться на его родительском элементе в полную ширину, и будет сжиматься вместе с ним. Только убедитесь, что изображения max-width, не превышают максимальную ширину его контейнера.

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

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

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

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

Медиа-запросы CSS

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

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

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

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

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

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

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

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

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

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

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

Mobile First или Desktop First?

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

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

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

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

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

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

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

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

HTML Адаптивный веб-дизайн

Что такое Адаптивный веб-дизайн?

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

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

Примечание: Веб-страница должна хорошо выглядеть на любом устройстве!

Настройка видового экрана

При создании адаптивных веб-страниц добавьте следующий элемент на всех веб-страницах:

Пример

При этом будет установлен видовой экран страницы, в котором будут даны инструкции по управлению размерами и масштабированием страницы.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки выше, чтобы увидеть разницу.

Адаптивные образы

Адаптивные образы — это изображения, которые хорошо масштабируются в соответствии с любым размером браузера.

Использование свойства Width

Если свойство CSS width имеет значение 100%, изображение будет реагировать и масштабироваться вверх и вниз:

Пример

Обратите внимание, что в приведенном выше примере изображение может быть увеличено до размера, превышающего его исходный размер. Лучшим решением, во многих случаях, будет использование свойства max-width вместо этого.

Использование свойства max-width

Если свойство max-width имеет значение 100%, изображение будет масштабироваться, если это необходимо, но никогда не масштабироваться, чтобы быть больше, чем его исходный размер:

Пример

Отображение различных изображений в зависимости от ширины браузера

позволяет определять различные изображения для различных размеров окна браузера.

Измените размер окна обозревателя, чтобы увидеть, как изображение ниже изменяется в зависимости от ширины:

Пример

Размер адаптивного текста

Размер текста можно задать с помощью блока «VW», что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Hello World

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер текста.

Пример

Hello World

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

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

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

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

Пример: измените размер окна обозревателя, чтобы увидеть, что три элемента div ниже будут отображаться горизонтально на больших экранах и штабелироваться вертикально на небольших экранах:

Пример

Совет: Чтобы узнать больше о мультимедийных запросах и адаптивном веб-дизайне, прочитайте наш учебник RWD.

Отзывчивый веб-страница-полный пример

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

Media queries CSS как АДАПТИРОВАТЬ сайт

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.

See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.

Из видео вы узнаете:

  • что такое Media queries и его составляющие элементы;
  • как формируется медиа запросы;
  • рассмотрим практически пример адаптивного дизайна сайта.

CSS3 медиа запросы или (media queries) – это определенный набор стилей и логических выражений, которые позволяют применять различные стили в зависимости от выполнения каких то дополнительных условий.

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

Медиа запрос состоит

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

Типы носителя

В се запросы начинаются с правила @madia , далее идет условие, в котором пишем тип носителя (screen) , он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print , all и speech .

Типы носителей включают в себя

  • all – Подходит для всех видов устройств. Это значение используется по умолчанию.
  • print – Просмотр на экране страничек в режиме предварительного просмотра печати.
  • screen – Просмотр на экране цветных компьютерных мониторах.
  • speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.

Устаревшие типы носителей:

  • braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
  • embossed — Принтеры, использующие для печати систему Брайля.
  • handheld — Смартфоны и аналогичные им аппараты.
  • projection – Проекторы.
  • tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
  • tv – Телевизоры.

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

Логические операторы

З атем идут логические операторы, при помощи которых можно писать дополнительные условия, если это необходимо.

К примеру, and , эквивалентно «И» , и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью.

Следующий оператор «запитая» , которая эквивалентна «ИЛИ» , и в данном случае если одно из условий верное, значит выражение является истиной.

Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.

Логические операторы:

  • and – Связывает друг с другом разные условия (эквивалентно «и»);
  • not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
  • only – Скрывает стили для браузера, которые не поддерживают данные условия;
  • , — Запятая работает по аналои с логическим оператором or (эквивалентно «или»);

Условие медиа запроса

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

Самые распространенные условия это максимальная и минимальная ширина max-width min-widt

Прописав ( max-width: 480px ), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.

Именно на таких примерах базируется адаптивная верстка, когда нам нужно применить стили под определенные расширения экраны мобильного устройства и все это делается через CSS (media queries).

  • width min-width max-width – ширина;
  • height min-height max-height – высота;
  • device-width min-device-width max-device-width – ширина на устройстве;
  • device-height min-device-height max-device-height orientation — высота на устройстве;
  • aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
  • device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio — соотношение сторон на устройстве;
  • resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
  • color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
  • color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
  • monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
  • scan grid – сетка сканирования;
Топ-пост этого месяца:  SEO оптимизация изображений для сайта сжатие, метатеги, формат

Описываем основную структуру в HTML и CSS

Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.

Создаем пять блоков, шапка сайта header , верхнее меню top_menu , левый сайт бар sideLeft , область для контента content и подвал footer .

Затем определим для них стили

Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.

Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.

Сайт бару, прописываем свои стили и прижмем его к левому краю:

Далее для области под контент пишем свои стили:

И завершающий блок это футер, делаем его на всю ширину в своем цвете:

Из-за того что sideLeft и content являются плавающими элементами за счет float , нужно сбросить обтекание этих блоков при помощи clear:both; .


Создадим класс и вставим дополнительный блок с этим классом:

У нас получился такого рода резиновый шаблон сайта, условно разделенный на блоки.

Подключаем CSS media queris

Для наглядной адаптации, сделаем шаблон фиксированной ширины, обернем все наши блоки в обертку, назначим обертке ширину в 980 пик. и отцентрируем по середине экрана.

Затем для всех медиа запросов создадим отдельный файл media-queries.css , который подключим после основного стиля.

Размер экрана меньше 992px

Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.

Начинаем с правила @media , скрываем стиле для браузеров которые их не поддерживают only , затем пишем носитель screen и логический оператор and « И », далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.

Затем, в фигурных скобках описываем стили для данного расширения:

Ширину обертки уменьшим на 750 пик.

Поменяем у блоков цвет, а у footer немного уменьшим высоту:

Размер экрана меньше 768px

Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.

Обертку уменьшаем до 450 пик.

У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.

Тоже самое проделаем с top_menu

Левый сайт бар, меняем цвет, делаем по всей ширине, уменьшаем отступ до 4 пик. убираем обтекание.

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

Убираем высоту .sideLeft

Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.

Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:

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

Затем опишем общие стили, и скроем их:

Размер экрана меньше 480px

Затем опишем стили под маленькие расширения экранов которые подходят под мобильные устройства.

Делаем обертку в 320 пик.

У остальных блоков поменяем цвет.

Для более, плавных переходов, воспользуемся свойством transition, и применим его ко всем элементам.

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

Подключаем Media Queries Javascript

Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js .

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

Под какие значения @media адаптировать дизайн сайта?

Есть ли статистика какие значения лучше использовать?

UPD Сам откопал и опубликовал ссылки, а то набежали Петросяны мериться в комментариях остроумием, но при этом ни одного ответа на поставленный вопрос.

  • Вопрос задан более трёх лет назад
  • 1960 просмотров

Дмитрий Шинкарь: новый подход уже давно появился. Просто стоит ориентироваться в выборе точек излома не на устройства, а на контент. Если посмотреть ответ, который выложил Сергей , поймёте, о чём я.

Не, я понимаю, что появляются всякие там 4k-мониторы и всё такое. Но, если ориентироваться именно на контент и то, как он отображается на разных разрешениях, этих самых точек излома понадобится сильно меньше)

Адаптивная верстка (теория).

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

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

Основные понятия

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

Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

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

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

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

И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

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

Подготовка к адаптивной верстке

В настоящее время до сих пор многие сайты созданы для отображения на экранах мониторов, по этой причине мобильные браузеры не отображают страницу на все 100%, а отображают её в виртуальном окне (viewport), которое, как правило, шире экрана устройства. Чтобы страница поместилась на экране устройства мобильные браузеры уменьшают её масштаб (сжимают отображаемый результат, чтобы его можно было увидеть сразу), коэффициент масштабирования зависит от характеристик конкретного устройства. Пользователи при этом могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

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

Впервые в мобильной версии браузера Safari появился метатег области видимости (viewport meta tag), который позволяет разработчикам сайтов контролировать как размер окна просмотра, так и масштаб самой страницы. Впоследствии остальные современные мобильные браузеры осуществили поддержку этого метатега, не смотря на то, что в тот момент он не являлся частью какого-либо веб-стандарта.

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

  • Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение w > атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.

Значение атрибута Определение
width Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width ).
height Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height ).
initial-scale Определяет соотношение между шириной устройства ( device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение — положительное целое число от 0.0 до 10.0.
user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Приоритет создания стилей

Давайте рассмотрим еще одну важную теоретическую тему, связанную с тем под какое устройство начинать разработку сайта — для мобильных устройств или компьютеров?

В настоящее время существует два основных подхода:

  • Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением). При использовании этого подхода Вы должны учитывать то, что Ваши страницы должны быть оптимизированы, максимально быстро загружаться и отображать важное содержание в первую очередь. Прочая информация должна загружаться и отображаться пользователю по его требованию, страница не должна загружать те ресурсы, которые не потребуются пользователю для получения необходимой информации. Этот подход в источниках упоминают также как content first, по той причине, что контент вашего проекта должен быть тщательно исследован и структурирован, чтобы быть классифицированным на основе важности. Подход mobile first может быть намного дороже, чем подход desktop first из-за более длительной фазы подготовки и опыта, необходимого для создания проекта.
  • Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.

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

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

Медиазапросы

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

Используя медиазапросы Вы сможете создавать точки останова, это чем то похоже на создание ключевых кадров в анимации, только в этом случае вы будете использовать разрешение экрана в пикселях, а не временные отрезки. Например, если ширина области простмотра устройства меньше 480 пикселей, то использовать одни стили, если ширина области простмотра устройства находится в диапозоне от 480 пикселей до 769 пикселей использовать другие стили и так далее.

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

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

Ниже представлено отображение этого сайта в режиме устройства в браузере Chrome:

Что должны изменять медиазапросы?

В этом разделе мы рассмотрим с Вами основные изменения страниц сайта, на которые должны быть нацелены Ваши медиазапросы:

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

  • «Резиновая ширина» — использование фиксированной ширины (свойство w >auto ), или значения в процентах. Это позволит превратить фиксированную сетку макета в резиновую, и независимо от разрешения экрана элемент поместиться на экране, не вызывая при этом переполнение содержимого. Обратите внимание, что в этом случае даже при смене ориентации экрана содержимое элемента просто растянется и подстроится под необходимое разрешение.
  • Изменение количества колонок — в зависимости от разрешения экрана изменяйте количество колонок в макете, например, четыре колонки будут хорошо смотреться на настольных компьютерах и планшетах с альбомной ориентацией, но этот макет не будет подходить для смартфонов, где было бы предпочтительно использовать две колонки и тому подобное.
  • Сужение пустого пространства — по возможности производите сужение внутренних и внешних отступов элементов (margin и padding) для размещения большего количества необходимой информации на небольших экранах, при использовании высоких значений для отступов пользователям мобильных устройств потребуется лишний раз прокручивать содержимое, что может негативно сказаться на визуальном отображении и удобстве при чтении.
  • Изменение навигации — традиционная горизонтальная панель навигации, используемая на большинстве сайтов, по мере сужения экрана будет вызывать переполнение содержимого, или перемещать элементы меню на новые строки, занимая всё больше пространства экрана. В некоторых случаях такое поведение будет допустимо, но в большинстве случаев такой подход не будет решать необходимую задачу. Существует несколько подходов изменения навигации, например, использование отдельной навигации для мобильных устройств, которая будет отображаться при определенном разрешении, а горизонтальная панель при этом будет скрываться, или применение динамических изменений навигации с использованием языка программирования JavaScript и CSS стилей, которые позволят создать оптимальное отображение на устройстве, например, отображать вертикальную навигацию по нажатию на определенную кнопку.
  • Настройка шрифта — при создании медиазапросов обратите внимание на тот момент, что крупные заголовки хорошо смотрятся на мониторах настольных компьютеров, но на мобильных устройствах трудно читаются и могут занимать большое количества пространства. По этой причине необходимо уменьшать размер шрифта для мобильных устройств, а что касается основного текста с информацией, то в этом случае наоборот следует увеличивать размер шрифта для лучшего восприятия информации.
  • Изящная деградация — используйте медиазапросы для того, чтобы скрыть то содержимое страниц сайта, которое по Вашему мнению допустимо явно не отображать пользователям мобильных устройств. Как правило, для этого достаточно указать для необходимых элементов свойство display со значением none .
  • Изменение фоновых изображений — если вы используете растровые изображения, например, формат png в качестве фона для элемента, обратите внимание на такой момент, что при уменьшении разрешения экрана фоновое изображение будет масштабироваться теряя при этом свой изначальный вид. Обратите внимание, что вы можете использовать для необходимого вам элемента другое фоновое изображение меньшего размера, которое будет лучше подходить для определенного размера экрана. Для этих целей изменяйте значение CSS свойства background-image для вставки изображения в качестве фонового для конкретного элемента.
Топ-пост этого месяца:  Коды состояний HTTP — (REST API в WordPress → Базовые знания REST API)

Подключение медиазапросов

В этом разделе мы с Вами рассмотрим как произвести подключение медиазапросов к таблице стилей. Самым распространенным вариантом подключения является внедрение медиазапроса в таблицу стилей с использованием CSS правила @media .

Ранее в этом учебнике мы уже рассматривали такие правила как @font-face , которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов», правило @keyframes , которое позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации, и правило @import, оно используется для импорта содержимого CSS файла в текущую таблицу стилей, мы о нем еще поговорим далее в статье.

Подключение медиазапросов с использованием правила @media

Правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Это правило имеет следующий синтаксис:

Давайте детально разберем из чего состоит синтаксис этого правила.

Логические операторы

Вы можете комбинировать медиазапросы с использованием логических операторов:

Значение Описание
and Оператор and («И») используется для объединения нескольких медиазапросов в один.
not Оператор not («Логическое НЕ») обращает результат — если медиазапрос был истинным без «not», то он станет ложным, и наоборот.
only Оператор only («Только») может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор.
, Оператор «,» позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает «true» (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR («ИЛИ» ).

Устройства (media type)

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

Значение Описание
all Подходит для всех типов устройств. Это значение по умолчанию.
print Предназначен для печатных страниц и для режима предварительного просмотра печати.
screen Экраны компьютера.
speech Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух).

Мультимедийные функции (media functions)

Ниже представлен перечень основных мультимедийных функций, которые являются частью современного стандарта:

Значение Описание
aspect-ratio Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем).
color Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
color-index Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
grid Определяет основано ли выходное устройство на сеточной системе (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно .
height Задает высоту области просмотра (используются единицы измерения CSS).
max-aspect-ratio Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
max-color Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
max-color-index Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
max-height Задает максимальную высоту области просмотра (используются единицы измерения CSS).
max-monochrome Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
max-resolution Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
max-width Задает максимальную ширину области просмотра (используются единицы измерения CSS).
min-aspect-ratio Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
min-color Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
min-color-index Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
min-height Задает минимальную высоту области просмотра (используются единицы измерения CSS).
min-monochrome Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
min-resolution Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
min-width Задает минимальную ширину области просмотра (используются единицы измерения CSS).
monochrome Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
orientation Определяет, находится ли область просмотра в режиме альбомной ориентации — экран шире, чем высота, или в портретной ориентации — высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait .
resolution Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
scan Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка — ( interlace ), прогрессивная развертка ( progressive ).
width Задает ширину области просмотра (используются единицы измерения CSS).

В настоящее время спецификации Media Queries Level 4 и Media Queries Level 5 включают некоторые улучшения синтаксиса и дополнительно вводят прочие мультимедийные функции, которые имеют ограниченную поддержку и возможно будут либо изменены, либо удалены к тому времени, когда они станут частью живого стандарта. По этой причине мы будем рассматривать в примерах лишь тот синтаксис и те функции, которые активно используются в настоящее время, к ним можно отнести такие как width , min-width , max-width , height , min-height и max-height .

Подключение медиазапросов с использованием тега

Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега

Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4:

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4:

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

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

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

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

Обращаю Ваше внимание, что представленные значения не являются обязательными для использования, а представлены лишь с ознакомительной целью и служат отправной точкой в мир адаптивной верстки 😉

Используем медиазапросы CSS3 для адаптивной вёрстки шаблона 31

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

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

В общем, медиазапросы – это хорошая альтернатива создания отдельного мобильного шаблона для сайта. О том, как важно позаботится об удобстве мобильных посетителей я писал ещё год назад, все доводы в пользу адаптивного дизайна можно прочитать здесь.

Зачем нужны медиазапросы и как они работают

Вы, конечно же, знаете, что каждый сайт состоит из HTML каркаса и CSS стилей. Всё остальное, базы данных, скрипты и прочие примочки, нужны в зависимости от сложности проекта.

HTML – каркас, это разметка сайта. То есть блоки с шапкой, подвалом, сайтбарами и контентом. Если вы представляете себе таблицу в текстовом редакторе Word, то каркас сайта – это нечто похожее на таблицу. Только вот код самого простого каркаса выглядит вот так:

Но в таком виде, на экране мониторов будет отображаться белый экран. Так как нет содержимого блоков и самого главного – CSS стилей оформления.

Когда же стили оформления присвоены, то страница сайт приобретает привычный для нас вид. Где изображения на своих местах, размер и цвет шрифта соответствует общей концепции и так далее.

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

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

И вот тут-то приходят на помощь медиазапросы. Которые, кстати, и стали доступны с появление новой версии CSS3.

Так как же они работают? А работают они следующим образом, если вам приходилось хоть раз писать формулы в Excel или программировать, то вы знакомы с условием «если». То есть медиазапрос создаёт такие условия: «если экран браузера или устройства меньше 600px, то применяй следующие стили».

А выглядит это таким вот образом:

Это условие будет менять дизайн сайта и при изменении размера окна браузера и при просмотре сайта с мобильного устройства.

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

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

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

Как подключить медиазапросы

На самом деле здесь всё очень просто. Вы можете добавить запросы в таблицу стилей вашего сайта (style.css) или создать новый файл со стилями для мобильных устройств и подключить его как отдельный файл стилей.

Для начала разберём первый вариант, — добавление медиазапросов в таблицу стилей. Запрос должен располагаться после всех основных стилей, то есть в самом низу файла style.css.

Медиазапросы в таблице стилей

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

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

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

Давайте рассмотрим процесс добавления медиазапросов этим способом.

Для начала вы создаёте отдельный файл с запросами и стилями. Сделать это можно в редакторе Notepad++. Сохраняете его как css файл.

Создание файла с медиазапросами

Далее, нужно копировать этого файла на хостинг в папку вашей темы, или в папку, где хранится файл style.css.

Копирование файла на хостинг

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

Этот код говорить о том, что эти стили будут срабатывать, если экран устройства меньше 600px.

Вот, в принципе и все хитрости с медиазапросами. Как гласит правило Парето – 20% усилий гарантирует 80% успеха. То есть знания, полученные в статье, на 80% гарантируют успешное применение на практике. Остальное дело за знаниями HTML и CSS.

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

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

Как на компьютере посмотреть вид сайта с мобильных устройств

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

Для этого достаточно нажать правую кнопку мышки на странице сайта и выбрать пункт «Просмотр кода элемента» для Хрома и Яндекса или «Исследовать элемент» для Файрфокса.

Просмотр адаптивной верстки в Яндекс

Просмотр адаптивной верстки в Firefox

А в панели разработчика можно просмотреть адаптивную вёрстку, нажав на кнопочки, показанные на скриншотах выше.

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

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

А у меня на сегодня всё, увидимся в новых статьях и видеоуроках. Желаю вам успехов!

Похожие статьи по теме:

Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:

Добавить комментарий