Адаптивная верстка блоков. Адаптивная верстка

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

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

Решение возникшей проблемы – адаптивная верстка , при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

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

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

просто менять размер экрана браузера,

расположить справа панель инспектора компонентов и менять ее ширину,

использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.

Что используют для оптимизации сайта под мобильные устройства? Метатег viewport

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

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

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

Пример Основные свойства метатега

width	Ширина видимой области. Рекомендуемое значение: device-width.
height	Высота видимой области. Рекомендуемое значение: device-height.
initial-scale	Первоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1.
minimum-scale	Минимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы.
maximum-scale	Максимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы.
user-scalable	Разрешает или запрещает возможность масштабирования страницы. Принимает значение true или false.

Контент шире экрана – часто возникающая проблема, как только задан viewport.

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

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

Пример .content { width: 100%; max-width: 1200px; } Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries .

Медиа-запрос начинается с правила @media , после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all ), логического оператора (and ) и медиа-функции (max-width: 360px ).

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

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

Логические операторы Основные медиа-функции Пример

Задан размер заголовка:

H1 { font-size: 72px; }

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

@media all and (max-width: 360px) { h1 { font-size: 42px; } }

Новые единицы размеров (vw, vh, rem)

vw	1% от ширины окна браузера (viewport).
vh	1% от высоты окна браузера (viewport).

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример body { min-height: 100vh; }

Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример html { font-size: 10px; } body { font-size: 1.6rem; } h1 { font-size: 7.2rem; } @media all and (max-width: 360px) { body { font-size: 1.4rem; } h1 { font-size: 4.2rem; } }

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

Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример ul.flex { display: flex; /* flex-контейнер */ flex-wrap: wrap; /* многострочный режим */ justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */ } li.flex { display: inline-block; flex-basis: 260px; /* базовая ширина элемента */ flex-grow: 1; /* все элементы одинаковой ширины */ max-width: 300px; padding: 8px; }

В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

На узком экране список станет вертикальным:

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

Для тех кто еще не слышал о таком термине как адаптивная верстка могу сказать что такую верстку можно назвать человеческим языком послушной. Этот вид верстки подстраивается под все возможные экраны устройств с которых пришел ваш посетитель, а в последнее время их мягко говоря полно (нетбуки, планшеты, iphone, устройства на основе Android …). У всех этих устройств есть особенность, они работают с разными экранами, но некоторые и них даже перестраивают отдельные элементы, так например iphone очень не кстати, вашему дизайну делает свои кнопки и поля форм на вашем сайте.

Адаптивная верстка — с чего начать

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

Что использовать для верстки:

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

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

/* Для больших экранов */ @media (min-width: 1200px) { ... } /* Для некоторых нетбуков и планшетов (таблеток) */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Для планшетов и некоторых телефонов */ @media (max-width: 767px) { ... } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @media (max-width: 480px) { ... }

/* Для больших экранов */ @ media (min - width : 1200px ) { . . . } /* Для некоторых нетбуков и планшетов (таблеток) */ @ media (min - width : 768px ) and (max - width : 979px ) { . . . } /* Для планшетов и некоторых телефонов */ @ media (max - width : 767px ) { . . . } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @ media (max - width : 480px ) { . . . }

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

viewport - для мобильных устройств

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

Бонус в пользу адаптивных сайтов

Поисковые системы уже намного лучше распознают адаптивные сайты и меняют выдачу под них. То есть ваш сайт, сделанный по правилам адаптивной верстки, скорее всего, будет выше для тех, кто ищет информацию с мобильных устройств, чем простые и скучные сайты которые нужно уменьшать и увеличивать на экране, чтобы на них прочесть хоть что-то. Такой вывод пришел ко мне из опыта разработки сайта для юридической компании и анализа его статистики. Google и Yandex любят удобные сайты, но учитывая, что такие сайты стоят в 3 — 4 раза дороже , не каждый может себе позволить заказать адаптивный дизайн и разработку под этот дизайн. Стоимость обусловлена тем что нужно рисовать дизайн под 3-4 устройства и верстать также под разные устройства, а такие CSS фреймворки как Bootstrap далеко не всегда могут решить все поставленные задачи которые на придумывал клиент).

Поговорим немного о Bootstrap

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

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

Для того чтобы сайт смотрелся хорошо на всех экранах недостаточно только перестраивать блоки, изменять их размер и назначение при помощи css фреймворков и JavaScript , нужно еще и помнить как ведет себя текст на разных экранах. Если на маленьком экране телефона в 480 пикселей текст хорошо смотрится на 12 пикселях, то на большем экране этот текст нужно увеличивать, так как на больших мониторах никто не смотрит на текст впритык, а читают его издалека. Недолго покопавшись в Интернет, я нашел отличную отличный плагин написанный на jqery. Называется плагин FitText и находится . Все, что вам надо сделать, это подключить плагин и вызвать его для нужных элементов страницы.

Пример использования fittext

$("#fittext1").fitText(); $("#fittext2").fitText(1.5); $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: "75px" });

$ ("#fittext1" ) . fitText () ; $ ("#fittext2" ) . fitText (1.5 ) ; $ ("#fittext3" ) . fitText (1.1 , { minFontSize : 50 , maxFontSize : "75px" } ) ;

У плагина есть одна особенность, он работает только с блочными элементами (block, block-inline).

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

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

На iphone трансформация работает по другому, причем во всех устройствах по разному. Когда вы выставляете 3D поворот объекта в CSS3 = 0 градусов, то объект таинственным образом может повернуться под некоторым углом, вместо того чтобы исчезнуть.

Для адаптивной верстки веб-дизайнер должен быть обучен всем тонкостям и если вы знаете PhotoShop, советую запастись примерами качественных адаптивных дизайнов в формате PSD, для примеров как делать надо или не надо. Также вам понадобиться гора терпения и никаких отговорок (почему разработчику надо учить PhotoShop или SEO, которые я слышу все чаще). Мой вам совет из опыта , никогда не работайте с именитыми дизайнерами, которые к веб-дизайну не имеют никакого отношения. Был плохой опыт работы и мороз со стороны дизайнера.

Работая с Bootstrap вам надо будет дорабатывать фреймворк если клиенту нужен макет больше чем 1200 пикселей в ширину. Хотя там работы не так много, но на сложных проектах мороки много, плавали, знаем…

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

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

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

Плавная трансформация блоков CSS3

*{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }

Webkit - transition : all 0.3s ease ; Moz - transition : all 0.3s ease ; O - transition : all 0.3s ease ; Ms - transition : all 0.3s ease ; transition : all 0.3s ease ;

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

transition - отмена трансформации

Class-block, .class-block * { /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

Class - block , . class - block * { /*CSS transitions*/ O - transition - property : none ! important ; Moz - transition - property : none ! important ;

Предисловие

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

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS , понимающих назначение CSS селекторов и т. д.

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

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) - подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body :

Резиновая верстка

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

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

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media ), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px 1200px и 320px для всех устройств, ширина которых меньше 480px .

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) - это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение Относительные значения

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

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера - указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

• vw - 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
• vh - 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
• vmin - выбирается наименьшее из vw и vh ;
• vmax - выбирается наибольшее из vw и vh .

Ниже рассмотрен пример использования vw и vh . В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

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

Существуют следующие относительные значения для шрифтов:

• em - задаёт размер относительно шрифта родителя;
• rem - задаёт размер относительно шрифта .

Рассмотрим пример:

Вычислим размер шрифта для тега body . В данном примере размер шрифта для body задается относительно размера html . Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px) .

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html - 16px .

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Рассмотрим пример:

Допустим, что родительским компонентом данного div является body . Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body . Однако он будет увеличиваться только до величины, определенной в max-width , это 500px . Как только контейнер достигнет этой ширины - он перестанет увеличиваться.

Использование медиа-запросов

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

С помощью медиа-запросов можно задать стили для следующих типов устройств:

• all - все типы (значение используется по умолчанию)
• braille - устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
• embossed - принтеры, использующие для печати систему Брайля
• handheld - смартфоны и аналогичные им аппараты
• print - принтеры и другие печатающие устройства
• projection - проекторы
• screen - экран монитора
• speech - речевые синтезаторы, а также программы для воспроизведения текста вслух
• tty - устройства с фиксированным размером символов
• tv - телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

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

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

• Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса

CSS-фреймворки

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

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

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

Рассмотрим самые популярные CSS -фреймворки.

Bootstrap

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

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

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

Отличительные черты:

• 12 - колоночная сетка
• Большое количество готовых для использования компонентов
• Поддержка Less и Sass
• Использование Normalize.css.

Material Design for Bootstrap

Material Design for Bootstrap - это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

Отличительные черты:

• 12 - колоночная сетка
• Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

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

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

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

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

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

О чем вообще идет речь, адаптивная верстка что это такое. На вашем сайте должен быть ЕДИНЫЙ адаптивный дизайн, в котором используется ОДИН код с корректировкой по размеру экрана. Переключатель на мобильную версию уже не проходит, это не правильно. Можно открыть руководство от Гугла и прочитать информацию более детально.

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

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

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

Конечно не каждый из нас имеет под рукой монитор, планшет и телефон. Чтоб проверить ваш сайт на адаптацию, иметь в наличии все виды устройств не обязательно. Если вы используете браузер Google Chrome, можете установить себе расширение, которое называется Window Resizer . С его помощью можно быстро проверить большинство вариантов вашего адаптивного дизайна.

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

Скажу еще раз, никакой горизонтальной линии прокрутки быть НЕ ДОЛЖНО. Все должно адаптироваться под любое разрешение экрана. Откройте главную страницу, ваши статьи, и еще несколько дополнительных страниц.

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

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

Примеры верстки

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

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

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

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

Уроки по изучению адаптивности сайта

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

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

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

Что такое медиа запросы.

Как правильно использовать медиа запросы.

Как сделать адаптивное меню.

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

И многое другое.

Если вы надумали вникнуть в данную тему и хотите попробовать ее изучить, для начала вполне подойдут уроки из книги Бена Фрейна, которая называется Html5 и CSS3 Разработка сайтов для любых браузеров и устройств. В ней вы узнаете все про адаптивный дизайн, благодаря чему сайты будут показываться красиво на всех устройствах. Очень хорошая книга, в которой идет описание всего процесса от А до Я.

Что такое Media Queries ?

Media Queries — это медиа запросы, которые используются при адаптивной верстке сайта. Именно про них идет речь в книге Бена Фрейна. Если сказать простыми словами, это код, в который помещаются CSS стили для заданного разрешения экрана. Таким образом подгоняются все возможные варианты дизайна.

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

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

@media (max-width: 1010px) and (min-width: 992px)

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

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

Создаем новый файл со стилями (подключаем его к главной странице) или добавляем в уже существующий файл медиа запросы. @media (max-width: 770px) — максимальная ширина экрана 770 пикселей. И добавляем в этот контейнер все необходимые изменения, которые нужны для данной ширины экрана.

@media (max-width: 770px) { body, html { overflow-x:hidden; min-height: 960px; background-size: 100%; } #mail_bg_horizontal div { left: 274px; position: relative; top: 40px; width: 340px; } #mail_bg_horizontal .module_subscribe figure { padding-top: 46px; } #footer_menu { display: none; } #header {background-size: 100%; padding-top: 48%;} #logo-site { top: -60px; font-size: 7vw; width:100%; margin: 10px;} #logo-site span{display:inline-block; padding-left:10px;} #slogan{ top: -77px; font-size: 3vw; margin: 10px;}

@ media (max - width : 770px ) { body , html { overflow - x : hidden ; min - height : 960px ; background - size : 100 % ; #mail_bg_horizontal div { left : 274px ; position : relative ; top : 40px ; width : 340px ; #mail_bg_horizontal .module_subscribe figure { padding - top : 46px ; #footer_menu { display : none ; #header {background-size: 100%; padding-top: 48%;} #logo-site span{display:inline-block; padding-left:10px;}

Теперь идем дальше, максимум 770 пикселей прошли, переходим к более меньшей ширине. @media (max-width: 650px) — добавляем все изменения, которые нужны для расширения 650 пикселей. Все происходит так же само, только уже для максимальной ширины 650 пикелей. Все необходимые изменения добавляются в один общий контейнер по данному медиа запросу.

@media (max-width: 650px) { #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 20px; width: 545px; } border: medium none; height: 28px; left: 93px; position: relative; top: -12px; width: 159px; } #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float: none; width: 100%; margin-left: 0; text-align: center; }}

@ media (max - width : 650px ) { #related_posts { padding - top : 20px ; width : 545px ; #mail_bg_horizontal .module_subscribe button { border : medium none ; height : 28px ; left : 93px ; position : relative ; top : - 12px ; width : 159px ; #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float : none ; width : 100 % ; margin - left : 0 ; text - align : center ;

После этого переход к следующей ширине, например 500 пикселей. Вносим в этот контейнер все необходимые свойства, которые должны помещаться в экран под максимальную ширину 500 пикселей. @media (max-width: 500px).

@media (max-width: 500px) { body > #content > .wrapper .navigation > .next { background: rgba(0, 0, 0, 0) url("images/bow_right.png") no-repeat scroll 0 0; display: none; float: left; height: 30px; margin-left: 1px; margin-top: -4px; width: 34px; } #mail_bg_horizontal .module_subscribe button { border: medium none; height: 28px; left: 96px; position: relative; top: -12px; width: 159px;}}

@ media (max - width : 500px ) { body > #content > .wrapper .navigation > .next { background : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - repeat scroll 0 0 ; display : none ; float : left ; height : 30px ; margin - left : 1px ; margin - top : - 4px ; width : 34px ; #mail_bg_horizontal .module_subscribe button { border : medium none ; height : 28px ; left : 96px ; position : relative ; top : - 12px ; width : 159px ; } }

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

@media (max-width: 400px) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 1px; width: 255px; }}

@ media (max - width : 400px ) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border - bottom : 1px solid #ccc; border - top : 1px solid #ccc; padding - top : 1px ; width : 255px ;

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

После обновления, Гугл рекомендует открывать доступ к css файлам, файлам плагинов, темы, скриптов и картинок для робота, только после этого вы сможете удачно пройти проверку.Для этого необходимо в файле robots.txt открыть все пути к необходимым файлам, чтоб робот их увидел. Вот пример с моего robots.txt:

/ wp - content / themes / * . jpg

Allow : / wp - content / themes / * . png

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

Адаптивный дизайн psd файла

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

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

Требования к PSD макету

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

Конечно вы не понимаете ничего в отступах, границах...что и как должно быть по стандартам в макете (вам это и не нужно), но на некоторые вещи обязательно обратите внимание. Это поможет вам сориентироваться перед составлением ТЗ для дизайнера.

Макет должен быть в формате PSD (само собой).

Каждый элемент в дизайне должен быть в отдельном слое.

Не нагружайте много фотографий.

Не используйте много шрифтов.

Используйте стандартные шрифты.

Все только самое необходимое.

Ничего лишнего.

Сделайте себе выпадающее меню.

Самые частые разрешения экрана

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

• Смартфоны портрет и ландшафт (минимум 320 px — максимум 480 px);
• Планшеты портрет и ландшафт (минимум 768 px — максимум 1024 px);
• Компьютеры и ноутбуки (минимум 768 px — максимум 1024 px);
• Компьютеры и ноутбуки (минимум 1824 px);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Img {max-width: 100%;}

Максимальная ширина изображения равняется 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 и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:

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

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

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

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

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

style.css (основной):

/* Основные стили, которые будут унаследованы дочерней таблицей стилей */ html,body{ background... font... color... } h1,h2,h3{} p, blockquote, pre, code, ol, ul{} /* Структурные элементы */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; }

mobile.css (дочерний):

#wrapper{ width: 90%; } #content{ width: 100%; } #sidebar-left{ width: 100%; clear: both; /* Дополнительные стили для нового дизайна */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; }

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

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

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

@media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }

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

@media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; } }

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

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

@media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } } @media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; } }

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

@media screen and (orientation: landscape) { .iPadLandscape { width: 30%; float: right; } } @media screen and (orientation: portrait) { .iPadPortrait { clear: both; } }

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

@media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; } }

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

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

JavaScript

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

$(document).ready(function(){ $(window).bind("resize", resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // Если ширина меньше 600 px, используется таблица стилей для мобильного if(newWindowWidth < 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth > 600){ // Если ширина больше 600 px, используется таблица стилей для десктопа $("link").attr({href: "style.css"}); } } });

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

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

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

Display: none;

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

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

Left Sidebar Content | Right Sidebar Content

Main Content A Left Sidebar A Right Sidebar

style.css (основной):

#content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } .sidebar-nav{ display: none; }

mobile.css (упрощенный):

#content{ width: 100%; } #sidebar-left{ display: none; } #sidebar-right{ display: none; } .sidebar-nav{ display: inline; }

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