Урок 3. Теория и практика адаптивной верстки. Медиа-запросы. Часть 2

Теория адаптивной верстки

Адаптивная верстка сайта

Теоретическая часть

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

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

Термин адаптивный веб-дизайн был придуман Итаном Маркоттом. Итан объеденил три существующие методики (макет гибкой сетки, гибкие изображения и медиазапросы) в единый подход и назвал его адаптивным веб-дизайном.

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

Рисунок 2 – Внешний вид сайта web-grafika.pro на экранах с разным разрешением

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

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

Также не стоит упускать тот факт, что мобильные пользователи намного активнее своих «стационарных» коллег: они больше времени проводят онлайн и готовы вступать в живую коммуникацию с сайтами. Странно не замечать очевидного – будущее за мобильными устройствами. Для электронных коммерсантов игнорировать этот тренд, по меньшей мере, беспечно.

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

Гибкий «резиновый» макет

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

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

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

Ширину главного контейнера тоже необходимо перевести в проценты, обычно это 100%.

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

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

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

1em=16px, em определяет соотношение ширины/высоты конкретной буквы и размера конкретного шрифта в пунктах.

Гибкие изображения

Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:

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

Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:

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

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

При создании адаптивных веб-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов (device-width).

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

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

В данном коде используется устройство с экраном (screen).

Можно задать ориентацию экрана устройства:

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

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

В данном коде мы указали значение initial-scale 1.0, в результате чего мобильный браузер будет обрабатывать страницу, придавая ей размер равной 100% от величины своей области просмотра.

В медиазапросы включают стили, которые изменяются при определенных размерах экрана. Те стили, которые не изменяются не указывают:

Использование фреймворков

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

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

На сегодняшний день существует множество таких фреймворков:

• Bootstrap
• Skeleton
• Foundation
• Semantic UI
• и другие.

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

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

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

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

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

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

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

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

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

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

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

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

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 пикселов и меньше меняется цвет фона веб-страницы.

Адаптивная верстка: что это и как использовать

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

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

Регулировка разрешения экрана

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

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Частичное решение: делаем все гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

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

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

«Бастион», Москва, от 80 000 до 200 000 ₽

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

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

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

Еще один способ: отзывчивые изображения

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

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc :

Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Интересная фича для iPhone

В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta :

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

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

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

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

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

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

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

Также значения медиазапросов можно комбинировать:

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

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

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

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

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

display: none используется для объектов, которые нужно спрятать.

Вот наша разметка:

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

Теперь прячем колонки и показываем ссылки:

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

Урок 2. Теория И Практика Адаптивной Верстки. Медиа-Запросы. Часть 1. Webformyself 13:30 HD

23.12.2020 14:52 2020-12-23T11:52:14.000Z

Описание:

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

Самые простые техники адаптивной верстки

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

1. Видео (демо)

Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:

2. Максимальная и минимальная ширина (демо)

Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div’а — 800 пикселей при возможности, но не более 90% ширины:

Так же можно масштабировать изображение:

Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:

3. Относительные значения (демо)

Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Ниже представлены примеры.

Относительный margin

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

Относительный размер шрифта

При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:

Относительный padding

На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:

4. Трюк с overflow:hidden (демо)

Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке. Наглядно — в демо.

5. Перенос слов (демо)

При помощи CSS можно переносить непереносимые текстовые конструкции:

Урок 2. Теория и практика адаптивной верстки. Медиа-запросы. Часть 1

Просмотров: 1 936

23 декабря 2020

Сергей Михеев

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

Сергей Михеев

Спасибо, отличный гайд

Alleks Grinn

Руслан Гусейнов

я ничего не имею против школы вебформайселф, я много ваших курсов посмотрел, но ребята, вы что прикалываетесь? зачем вы уже почти в 2к19 выкладываете уроки по медиа запросам?
1) по медиа существует тонна видео на ютюбе
2) звук в вашем видео оставляет желать лучшего

Вы могли бы что нибудь реально классное по верстке выложить? Например те же мастер классы по верстке лендингов на bootstrap 4, с вразумительной семантикой и учетом кроссбраузерности? По бутстрапу4 практически вообще нет никаких мастерклассов на ютюбе, разве что от Андрея Гаврилова с WayUP, но тот его мастер класс старый, да и верстал он конечно там так будто сам только познакомился с BS4.
Есть множество тем, которые плохо разобраны и представлены в видео формате, а вы заливаете уроки обычно верстки, каких тонны на ютюбе.

Урок 2. Теория и практика адаптивной верстки. Медиазапросы. Часть 1

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

Полный курс по теории и практике адаптивной верстки смотрите тут: .

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

Адаптивная верстка #1 | Медиа-запросы. Наша группа в вк В этом видео уроки.

Основы и эволюция адаптивной вёрстки

Основы создания адаптивной вёрстки. Media-запросы и тег viewport. Размеры в % и max-width. Проблемы классической.

Media queries (Адаптация страниц) / Responsive Web Design Tutorial

Создавая уникальные страницы с #HTML и #CSS, приходится задумываться об #адаптации их под разные #разрешения

Уроки CSS — Медиа запросы основы. Как сделать адаптивный сайт.

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

Урок 13. Адаптивная верстка | Курс Веб разработчик | Академия верстки

Ссылка на полный плейлист: Это закрытые записи курса веб-разработчик 10.0. Получите полный досту.

Создание адаптивных сайтов — урок первый

Пройди БЕСПЛАТНО профориентацию в IT — В этом первом вводном уроке курса по созданию .

Уроки CSS: В чем разница адаптивный и отзывчивый дизайн сайта

Мы продолжаем рубрику уроки CSS и в этом видео мы обсудим немало важный вопрос при устройстве на работу и.

Адаптивная верстка по макету PSD от А до Я

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

Media queries CSS. АДАПТАЦИЯ под мобильные устройства

Media queries #CSS или как реализовать #адаптацию под #мобильные #устройства на своем сайте, каким образом .

Адаптивная верстка. Урок 4. Meta-viewport

Медиа запросы в языке CSS, media css адаптивный дизайн, @media screen css Видео курс по CSS, Урок 5

Медиа запросы в языке CSS, media css адаптивный дизайн, Видео курс по CSS, Урок 5. В этом видео я расскажу.

Медиа запросы @media простым языком | CSS для Профи

ПОДДЕРЖАТЬ АВТОРА И КАНАЛ: Webmoney: Z166344793421 .

#5 ActiveBox — Верстка сайта с нуля для начинающих | Адаптивная верстка

Продолжаем практиковаться в верстке сайтов на HTML и CSS. В этом видео научимся работать с медиа запросами..

Создание адаптивных сайтов — урок пятый. Media queries

Пройди БЕСПЛАТНО профориентацию в IT — В этом уроке мы рассмотрим второй ингредиент .

CSS GR >Знакомлю с новейшей технологией адаптивной верстки сайтов — Grid css. В данном уроке рассматриваются.

Теория и практика адаптивной верстки. Введение

Полный курс по теории и практике адаптивной верстки смотрите тут: .

Верстка сайта по методологии БЭМ

�� Интенсив «Wordpress Мастер» — ru/wordpress-master/ Реальная верстка сайта по методологии БЭМ. Разбор .

Уроки Flexbox Практика — Адаптивная верстка сайта. Макет.

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

Катасонов В.Ю. Теория и практика создания автономных хозяйств общин на русской земле Часть 1

Всем привет, мы продолжаем уроки Flexbox практика и в этом уроке я покажу как сделать адаптивный шаблон сай�.

1-ый 2-й и даже для Оценка класс Урок чисел нечетные или или

Всем привет, мы продолжаем уроки Flexbox практика и в этом уроке я покажу как сделать адаптивный шаблон сай�.

How To Crochet Squares Урок 7 часть 1 из 2 Мотивы и соединение их в полотно

Всем привет, мы продолжаем уроки Flexbox практика и в этом уроке я покажу как сделать адаптивный шаблон сай�.

2010 и в в и к де де по из также Школа Хэллоуин Ла Ля в в Лпс часть сезон назад эпизод 1 2/3

Всем привет, мы продолжаем уроки Flexbox практика и в этом уроке я покажу как сделать адаптивный шаблон сай�.

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

Смотреть видео Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport на ВМире бесплатно

86 | 3
WebForMySelf | 11 мес.

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

Урок 2. Теория и практика адаптивной верстки. Медиа-запросы. Часть 1

Show player controls

• Published on Dec 23, 2020
• Полный курс по теории и практике адаптивной верстки смотрите тут: webformyself.com/category/premium/htmlcss-premium/responsive-premium/
  В этом уроке мы приступим к изучению медиа-запросов, которые являются неотъемлемой частью в адаптивной верстке и позволяют в зависимости от условия выполнять тот или иной css код.
  По результатам урока вы узнаете, что такое медиа-запросы, познакомитесь с их синтаксисом, узнаете какие типы устройств поддерживаются ими, научитесь создавать сложные условия media queries при помощи логических операторов.

Comments • 8

Полный курс по теории и практике адаптивной верстки смотрите тут: webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

Пока что нет в планах.

Спасибо, отличный гайд

я ничего не имею против школы вебформайселф, я много ваших курсов посмотрел, но ребята, вы что прикалываетесь? зачем вы уже почти в 2к19 выкладываете уроки по медиа запросам?
1) по медиа существует тонна видео на ютюбе
2) звук в вашем видео оставляет желать лучшего
Вы могли бы что нибудь реально классное по верстке выложить? Например те же мастер классы по верстке лендингов на bootstrap 4, с вразумительной семантикой и учетом кроссбраузерности? По бутстрапу4 практически вообще нет никаких мастерклассов на ютюбе, разве что от Андрея Гаврилова с WayUP, но тот его мастер класс старый, да и верстал он конечно там так будто сам только познакомился с BS4.
Есть множество тем, которые плохо разобраны и представлены в видео формате, а вы заливаете уроки обычно верстки, каких тонны на ютюбе.

@WebForMySelf а он на канале будет ?)))
Или это платный курс будет ?

Здравствуйте! По Bootstrap 4 готовим отдельный большой курс!