Код адаптивной верстки. Адаптивная вёрстка — как побороть боль? viewport — говорим с мобильным браузером и настраиваем изменение размера экрана

Ошибки
23.02.2024

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

Современная тенденция

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

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

Определение адаптивной вёрстки

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

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

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

Достоинства адаптивного макета

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


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

Минусом такого подхода некоторые веб-мастера называют сложность его реализации. Но с появлением CSS 3 создать шаблон адаптивной вёрстки стало совсем просто. Даже не самые опытные веб-мастера могут сделать свой сайт удобным для просмотра на мобильных устройствах.

Принципы и особенности адаптивной вёрстки

Какие принципы лежат в основе метода адаптивной вёрстки в веб-дизайне?

Использование «резинового» типа макета.

- «Резиновые» изображения.

Использование медиазапросов (media-queries).

Необходимость думать о мобильных устройствах с самого начала создания вёрстки.

Из этих основополагающих принципов такого метода создания шаблона вытекают следующие особенности адаптивной вёрстки:

1. Проектирование и создание дизайна сайта с учётом работы на всём спектре разрешений: от мобильных до широкоформатных дисплеев.

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

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

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

С чего начать вёрстку адаптивного макета?

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

Адаптивная вёрстка, примеры которой можно встретить довольно часто, имеет массу достоинств. Что следует помнить при таком подходе к созданию макета страниц?

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

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

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

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

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

Самая критичная величина - это ширина окна браузера. Минимально, на самых бюджетных смартфонах это 240-360px, но в большинстве случаев всё же 480 px и выше. И это более чем в два раза меньше, чем стандарт мониторов с шириной 1024 пикселей.

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

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

Но всё лучше показать на примере. Давайте сверстаем простой адаптивный макет с минимумом элеменов, внешний вид готового примера можно посмотеть на демо-странице:

Итак, наши требования к его адаптивности таковы:

  • Ширина основной части должна растягиваться на больших разрешениях, но до определенной величины, ведь слишком длинные строки не удобно читать.
  • При уменьшении ширины браузера изображения должны пропорционально сжиматься, чтобы не выходить за границы области.
  • При ширине менее 700 пикселей (минимум – планшет или смартфон с hd экраном в портретной ориентации) три блока внизу должны выстроиться друг за другом и занимать 100% ширины основного блока.
  • Так же, при этом левый сайдбар должен сворачиваться, в узкую полосу освобождая место для основной части.
  • Предусмотреть кнопку, тап по которой раскрывает и закрывает сайдбар, который теперь должен быть позиционирован над основным блоком, в виде всплывающего меню.

Начнём. Я создал файл index.html, и папки css и images, куда поместил соответственно файл стилей и вырезанные из макета картинки.

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

В правом основном блоке каждый пост обернём div-ом с классом.text_block, добавим текст-заполнитель с инструмента яндекс-рефераты, и изображения для примера.

В низ добавим три блока.footer_block, обернём их в общий.footer. Статьям добавим заголовки H2, H3, и в итоге получим разметку подобную этой:

Пример адаптивной вёрстки макета. Heaven Web - блог для веб мастера. Блог о веб разработке

  • Главная
  • Вёрстка
  • Jquery
  • Drupal
  • Другое
  • Контакты
Из ряда вон выходящий план размещения: методология и особенности

Здесь текст с яндекс рефераты...

Ещё некоторое кол-во текста с картинками

Первый заголовок

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

Второй заголовок

Исходя из структуры пирамиды Маслоу, лидерство в продажах упорядочивает принцип восприятия, отвоевывая свою долю рынка.

Третий заголовок

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

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

Теперь займёмся стилями CSS. Оформим левый блок:

Left_side{ background: #1d282b; width: 300px; position: fixed; left: 0; top: 0; height: 100%; z-index: 5; } .logo_text{ padding: 20px 10px; color:#ffffff; font-size: 24px; line-height: 30px; font-weight: normal; font-family: myPTNarrow; text-align: center; } .logo_text a{ display: inline-block; } .logo_text span{ color:#72898f; font-size: 18px; line-height: 24px; padding: 0 10px 18px; text-align: center; display: block; } .left_menu{ margin-top: 30px; } .left_menu ul{ display: block; list-style-type: none; } .left_menu li{ display: block; height: 30px; line-height: 30px; } .left_menu li a{ display: block; line-height: 30px; font-size: 18px; font-family: myPTNarrow; color:#ffffff; text-decoration: none; padding-left: 60px; } .left_menu li a:hover{ background: #343e41; } .social_img{ text-align: center; } .social_img a{ display: inline-block; margin: 0 10px; width: 30px; height: 30px; overflow: hidden; } .social_img a:hover{ opacity: 0.7; } .tw_icon{ background: url("../images/social.png") top left no-repeat; } .go_icon{ background: url("../images/social.png") top right no-repeat; } .left_swap{ display: none;/* По умолчанию блок не виден, он показывается, если срабатывает медиазапрос */ position: fixed; width: 50px; left: 0; top: 0; height: 100%; z-index: 6; background: url(../images/swipe.png) #1d282b center 20px no-repeat; }

Здесь для контейнера.left_side мы указали position: fixed. Это свойство позволит блоку всегда оставаться слева (благодаря left: 0; top: 0; и height: 100%;) и не прокручиваться с основным контентом. Чтобы блок наверняка не перекрывался ничем добавим z-index: 5.

Так как ширина левого блока 300 пикселей, то центральный блок (.wrapper) должен иметь внутренний отступ от левого края - padding-left: 300px, чтобы не «попадать» под левое меню.

Общий код центрального блока:

Wrapper{ position: relative; background: #ffffff; min-height: 200%; min-width: 400px; max-width: 1200px; padding-left: 300px; padding-right: 0px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .wrapper a{ color:#576a6f; } .wrapper a:hover{ color:#1d282b; } .text_block{ overflow: hidden; color:#4a4a4a; font-size: 18px; line-height: 24px; min-height: 200px; background: url("../images/hr.png") left bottom repeat-x; padding: 10px 40px 10px; } p{ margin-bottom: 24px; } .cent_img{ display: block; margin: 0 auto 40px; } .auto_img{ display: block; max-width: 100%; margin: 0 auto 24px; }

Здесь самое важное это оформление ширины этого блока. Для.wrapper укажем свойства

Min-width: 480px; max-width: 1200px;

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

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

Далее разберёмся с медиа запросами СSS. Все такие запросы выглядят следующим образом. Вначале идёт заголовок @media, затем указывается тип устройства на котором требуется применить css код этого запроса. Для обычного цветного экрана это слово screen (или чаще пишут all то есть для всех устройств). Затем в круглых скобках указываются условия и параметры.

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

То есть одно наше условие будет выглядеть вот так:

@media screen and (max-width:800px){ .left_side{ display: none; } .left_swap{ display: block; } .wrapper{ padding-left: 50px; } }

В фигурных скобках мы уже проставили нужные CSS правила, а именно скрываем левое меню, и показываем скрытый ранее вспомогательный узкий левый блок - .left_swap.

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

@media screen and (max-width:720px){ .footer_block{ display: block; width: 96%; } }

Т.е. элементы перестают быть инлайновыми, и становятся блочными, благодаря чему, выстраиваются друг за другом. Свойством width: 96%, мы увеличиваем их ширину до максимума (не до 100%, т.к. у нас сохраняются паддинги – внутренние поля).

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

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

На последок, оформим с помощью jQuery открытие левого меню по клику на свёрнутом узком левом блоке – на.left_swap. Например так:

JQuery(function($) { $(".left_swap").click(function (){ $(".left_side").toggle(); return false; }); })

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

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

PS: В последнее время на блоге очень много спама в комментариях, не всегда успеваю его чистить, но всё равно все ваши комментарии по делу читаю и постараюсь ответить.

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

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

1. Адаптивная верстка сайта - что это такое

Адаптивная верстка сайта - это такая html верстка, в которой в зависимости от размеров окна браузера сайт "трансформируется" в удобной для пользователя вид

Отличия мобильной версии сайта и адаптивной

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

2. SEO оптимизация и адаптивная верстка

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

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

3. Как проверить сайт на адаптивность

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

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

Можно просто вручную изменять размеры окна браузера по ширине и смотреть результат. В Firefox или Google Chrome есть адаптивный дизайн браузера нажав Ctrl+Shift+M.

Самое главное условие - это добиться отсутствия горизонтальной прокрутки и отсутствия flash-плагинов на странице.

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

После проверки возможно два варианта. Либо сайт оптимизирован, либо нет:

Например, проверка адаптивности в Google:

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

4. Как сделать адаптивную верстку сайта

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

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

Синтаксис CSS @Media

@media тип_устройства and|not|only (медиа_особенности ){ ... Описание стилей... }

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

@media screen and (max-width : 800px ) { ... стили ... } Примечание

Стили надо писать последовательно от большого разрешения к маленькому, то есть сначала общие стили, а потом для «урезанных» размеров, например:

@media only screen and (max-width : 1280px ) { ... } @media only screen and (max-width : 1024px ) { ... } @media only screen and (max-width : 800px ) { ... }

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

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

5. Практичные примеры адаптивной верстки сайта 5.1. Адаптируем очень длинные слова

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

.hphns { overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; hyphens : auto ; } 5.2. Адаптивное меню сайта

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

Реализовать это на сайте можно, но придется немного повозиться со стилями. Давайте рассмотрим все по шагам.

Ситуация, когда у нас есть меню и есть основной контент (я не стал рисовать шапку и футер):

Html код такой структуры может быть примерно таким:

body { margin-left : 10% ; width : 70% ; border : 1px solid #eee ; } #menu { width : 20% ; height : auto ; float : left ; } #content { width : 70% ; height : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ; } Меню Название страницы

Контент страницы

Контент страницы

Контент страницы

Контент страницы

Преобразуется на странице в

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

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

Приведем html-код адаптивной верстки с комментариями:

body { margin-left : 10% ; width : 70% ; border : 1px solid #eee ; } #menu { width : 20% ; height : auto ; float : left ; display : block ; } #content { width : 70% ; height : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ; } #mob_menu { display:none ; } @media only screen and (max-width : 800px ) { #menu { display : none ; } #mob_menu { display : block ; } #content { clear : both ; } } function showmobmenu() { if ( == "block ") { document.getElementById("menu").style.display = "none " } else { document.getElementById("menu").style.display = "block " } } Раскрыть меню ↓ Меню Название страницы

Контент страницы

Контент страницы

Контент страницы

Контент страницы

Уменьшим ширину экрана до 700 пикселей (к примеру). Вот как это выглядит на странице

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

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

Video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

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

Container { width: 800px; max-width: 90%; }

Так же можно масштабировать изображение:
img { max-width: 100%; height: auto; }

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

@media \0screen { img { width: auto; /* for ie 8 */ } }

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

3. Относительные значения (демо) Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Ниже представлены примеры.Относительный margin Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Как видно из скриншота, второй способ гораздо читабельнее:

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

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

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

5. Перенос слов (демо) При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word { word-wrap: break-word; }