Правильная адаптивная верстка. Адаптивная вёрстка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

От Masterweb 20.04.2018 01:00

Верстка - это создание структуры и оформление элементов web-страницы. Написанием кода веб-страницы занимается верстальщик или front-end разработчик. Он использует графическую программу для нарезки макетов, редактор кода, дополнительные программы для ускорения процесса.

Что такое верстка

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

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

Для создания страниц по современным стандартам применяются разные методы адаптивной верстки. Это обеспечивает корректное отображение элементов на всех типах экранов.

Виды макетов

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

• статическая;
• резиновая;
• адаптивная.

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

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

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

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

Размеры для адаптивной верстки

Для создания адаптивных макетов используются относительные единицы измерений вместо стандартного статического px. Самые распространенные:

В адаптивной верстке на html em используется для того, чтобы задавать размеры шрифтов и отступов. По умолчанию 1 em равняется 16 пикселям. Соответственно, чтобы задать шрифт для параграфа p размером 32 пикселя, необходимо указать следующие:

Особенностью использования единицы является то, что 1em равняется размеру шрифта своего элемента. То есть 1em принимает различные значения в разных участках кода. Например, в блоке, где размер шрифта равняется 2em (32px), margin в 1em будет равняться 32 пикселям. Но там, где шрифт равняется 1em (16px), padding в 1em будет равняться стандартным 16 пикселям.

Rem - корневой em, который определяется в теге. 1 root-em, в отличие от 1em, равняется одному числу при любых обстоятельствах. Значение меняется только тогда, когда изменения задаются принудительно.

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

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

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

Определяемые типы устройств:

• устройства braille и принтеры embossed для слепых;
• обычные принтеры print;
• экран монитора screen;
• речевые синтезаторы speech;
• телевизоры tv.

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

@media screen and (max-width: 600px) { код вывода }.

Адаптивный дизайн строится на использовании медиазапросов. Создается верстка для экранов, у которых минимальная ширина 1200 пикселей, тело кода помещается в @media screen and (max-width: 1200px) { }. Далее создается блок для планшетов @media screen and (min-width: 700px) { } и мобильных устройств @media screen and (max-width: 699px) { }.

Mobile First

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

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

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

Bootstrap

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

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

Динамические эффекты написаны на jQuery, для описания внешнего вида используется препроцессор SASS, в функционал встроены популярные веб-шрифты. Сайты, разработанные на последней версии bootstrap, не отображаются корректно в редко используемых версиях браузеров, таких как IE8, IE9 и iOS 6. Примечательно, что в качестве размеров шрифтов некоторых элементов используются корневые em. На официальном сайте есть подробные мануалы на английском и русском языке, примеры адаптивной верстки, способы использования встроенных компонентов.

Foundation

Foundation - мощный фреймворк, один из главных конкурентов Twitter Bootstrap. Поддерживает любые размеры сеток, имеет ряд преимуществ, которых не хватает в Bootstrap.

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

Размеры задаются значениями, приведенными в таблице.

small 0 smedium 420px medium 640px large 1024px xlarge 1200px xxlarge 1440px Grid Layout

Еще одна система, которая заслуживает внимания, - это Grid Layout. Представляет собой набор пересекающихся вертикальных и горизонтальных линий. Они образовывают столбцы и строки. Элементы помещаются в сетку, их размеры указываются в соответствии со строками и таблицами. Имеется возможность использовать фиксированные размеры, такие как px, и гибкие - проценты, rem и em.

Сначала grid контейнер нужно объявить.

Для задания ширины строк используется свойство grid-template-columns, а столбцов - grid-template-rows. Размеры могут быть указаны в одном свойстве grid-template-columns. Ширина полос измеряется в единицах fr, которые представляют собой долю доступного пространства в контейнере. Предусматривается возможность использования fx и px в одном свойстве. Например, grid-template-columns: 500px 1fr 2fr.

Заключение

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

Улица Киевян, 16 0016 Армения, Ереван +374 11 233 255

Всем привет!

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

Недавно мне дали сверстать макет мобильного приложения и я решил наконец попробовать побороть эту боль, сделать красиво и лаконично - использовать rem. Это показалось мне самым простым решением, 100% мобильных браузеров поддерживают эту единицу. Суть в том, что мы пишем несколько строк media queries для тега html, указывая лишь базовые размеры шрифтов в пикселях, пропорционально тому, как должен выглядеть у нас макет в разных разрешениях, а остальную вёрстку без media queries верстаем как обычно, только вместо пикселей используем rem. Данная методика легко масштабируется и подгоняет макет в зависимости от базового размера шрифта.
Минимизация кода и лёгкость адаптивной вёрстки таким способом просто колоссальна!

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

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

Когда я вернулся к адаптивке для обычных сайтов - боль ко мне вернулась ещё с больше силой, чем прежде, ведь как правило мы имеем от 3-х до 6 разных дизайнов:
1) Десктоп большой 1600-1920 пикселей
2) Десктоп маленький/ноутбук ~1100-1400 пикселей
3) Старый моник / планшет - 768-1024 пикселей
4) Недопланшет/ смартфон-переросток ~600 пикселей
5) Смартфон 300-480
6) Старый смартфон 250 пикселей.

Я конечно преувеличил, но как минимум три вёрстки делать нужно это точно.

Так вот вопрос №1 и самый главный: как минимизировать адаптивную вёрстку и сделать код красивым? Как уменьшить т.н. энтропию кода? Существует ли какой-нибудь клёвый подход/методика?

Посмотрел разные сайты крутых веб студий, в целях найти ответ там и увидел что все верстают как попало, то есть вообще не заморачиваясь.
Единственное, видел что некоторые зачем-то используют em и проценты для шрифтов вместо привычных пикселей. Вроде как для масштабирования текста, хотя непонятно как это уменьшает код для адаптивки, по моему только всё усложняет - нужно вести расчёты в зависимости от размера шрифта родительского блока и даже препроцессоры скорей всего не помогут... Незнаю зачем нужно париться задавая размеры шрифтов em единицами, заморочки с rem ещё куда не шло... Может я плохой верстальщик... Кстати особо упоротые из тех сайтов использовали em для margin и прочих box-size свойств...
Вопрос №2:
В чём смысл использовать em?
И cразу вопрос №3:
Неужели нет единой методики, неужели в вёрстке всё так плохо, что каждый как хочет так и д....чит? Или я видел неудачные примеры (хотя искал среди топовых тем themeforest и сайтов топовых веб студий)?

Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн - это просто! В этой статье представлено 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; }

Приветствую всех читателей блога 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: В последнее время на блоге очень много спама в комментариях, не всегда успеваю его чистить, но всё равно все ваши комментарии по делу читаю и постараюсь ответить.