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

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

Адаптивная верстка сайта (иногда ее еще называют mobile-friendly) - ПОДРОБНО и по шагам как на уроке:

Обратите внимание: что у Яндекса и Google - есть свои инструменты, при помощи которых вы можете проверить сайт на адаптивность. У Яндекса в новой версии Вебмастера он находится так: инструменты - проверка мобильных страниц.

Если вы хотите знать как сделать адаптивный дизайн сайта - то об этом будет написано ниже и подробно в примерах, НО, если у вас нет навыков работы с css - то будет сложнее. Или это может сделать ваш программист или вебмастер.

Отзывчивый дизайн сайта - предполагает задание ширины окна страницы и ширину колонок и сайдбаров в %, в адаптиве - в px.

Обратите внимание: если у вас популярный движок вашего сайта, типа wordpress, то у них нет "головной боли" с адаптивным дизайном - все там делается парой кликов мыши - просто устанавливается и активируется плагин и ВСЕ). Например для WP - использовал WPtouch - очень хорош, но, если есть штатный программист - то лучше делать индивидуально этот момент.

Нужно понять, что в основном при адаптивной верстке часто манипулируют: шириной (width элемента: max-width и min-width), float (обтеканием, его убирают по мере уменьшения ширины окна), font-size (меняют высотку букв).

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

2) Адаптив параметров страницы (ширины и высоты):

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

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

3) Css адаптивна верстка для картинок всего сайта :

img { max-width: 100% ;
height: auto;
}

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

4) Адаптивная верстка текста сайта : в данном случае манипуляции происходят с высотой шрифта: font-size и другими параметрами.

Break-word { word-wrap: break-word; }

Этот CSS предназначен для расстановки переноса, если есть длинные не переносимые слова.

Есть много ошибок по размеру шрифта: Яндекс любит писать - Размер текста слишком мал для чтения на мобильных устройствах - для этого делаем так:

body {font-size: 16px} - это позволит избежать этой ошибки, а уже для тега p и для ссылок нужно отдельно проставить. Именно из-за того, что в теге body стоит font-size: 12 или 14 px - именно поэтому выходит эта ошибка! И выйдет вот такой вердикт:

5) Адаптация 3 колоночного дизайна или 2 колоночной верстки - в этом нет ничего сложного, если все сделано на div - ах то обычно нужно отменить обтекание, то есть выставить float в none и блоки опустятся вниз.

6) Адаптив CSS для видео (с Хабра):



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% ;
}

Media Queries - медиа запросы

Для создания адаптивного диза часто используют media запросы (они задают правила исходя из размеров экрана по ширине - исходя из разрешения экрана).

Вот заготовочка media queries - под какие разрешения делать адаптивный дизайн:


@media only screen and (max-width: 1200px) {


@media only screen and (max-width: 992px) {

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {


@media only screen and (max-width: 480px) {

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
/**/
}

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
/**/
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
/**/
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
/**/
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
/**/
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
/**/
}

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

При медиа запросах начинаем сверху: все что сделали допустим для max-width: 768 будет срабатывать и при 480.

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

Например Яндекс может такое выдать - Есть горизонтальная прокрутка :

Это у вас что-то с padding или margin - обнулите их для родительских селекторов (блоков) и будет вам счастье.

И в конце Яндекс Вебмастер показывает такое:

Тоже делал 4 часа, в первый раз всегда сложно! Но далее, уже за пару часиков можно делать! И отправляем в вебмастер на перепроверку, чтобы побыстрее - важно для SEO .

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

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

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

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

Вёрстка главной страницы

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

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


Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

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

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип

Читайте также

Понравилось? Лайкни нас на Facebook