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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Адаптивная сайта сегодня создается при помощи языка разметки HTML5 и каскадных таблиц стилей CCS3. Но до того момента, как соответствующие технологии стали стандартом для всех популярных браузеров, для соответствующих целей использовался язык программирования JavaScript. Еще раньше (до 2010-го года) приходилось создавать несколько вариантов одних и тех же страниц, но с разной разметкой, чтобы разрабатываемый ими сайт правильно отображался на различных экранах.

Для чего нужна адаптивная верстка страницы

До относительно недавнего времени при заходе на многие сайты в нижней части браузера можно было увидеть ползунок, обеспечивающий скроллинг страницы по горизонтали. Такое происходило, например, если окно интернет-обозревателя не было развернуто на весь экран, а занимало сравнительно небольшую его площадь. Также это можно было почти всегда видеть, когда разрешение экрана, на который выводилось изображение, составляло 800 на 600 или, тем более, 640 на 480 пикселей.

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

Почему и когда появилася адаптивный дизайн?

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

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

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

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

При помощи чего и как создается адаптивная верстка?

Прежде чем приступить к рассмотрению вопроса, который касается того, как сделать адаптивную верстку, необходимо кратко рассмотреть основные применяемые технологии. Сейчас их две: HTML5 и CSS3. До недавнего времени применялись HTML4 и CSS2, но чтобы при помощи них можно было создать универсальный дизайн, приходилось использовать еще и JavaScript.

CSS3 – это новое поколение каскадных таблиц стилей. Данная технология предназначается для создания правил отображения элементов страницы в браузере пользователя. При помощи нее можно указать, например, какой размер должен иметь элемент при определенном разрешении экрана пользователя, либо установить правило, что тот всегда должен занимать определенный процент пространства (100% - заполнение всей рабочей области браузера).

Именно в третьего поколения появилось правило "media queries", используя которое верстальщик может создавать отдельные классы для каждого конкретного разрешения.

Очень важный момент!

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

Что касается HTML5, то при его помощи выполняется непосредственно разметка страницы, т.е указывается то, где должны размещаться определенные элементы. Чтобы объекты подстраивались под разрешение, в параметрах HTML-тегов указываются заранее созданные при помощи CSS3 классы.

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

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

Вначале при помощи HTML разместим на странице сам элемент:

Тег DIV – указывает, что все, что в нем заключено, является отдельным блоком. Когда на странице много таких блоков, указывается атрибут "class". Это необходимо, чтобы браузер понял, какое правило применять для конкретного блока.

Теперь необходимо создать непосредственно само правило, так называемый,

CSS-контейнер:

Div { width: 100%; text-align: center; } div img{ wight: 100%; height: auto; }

В этом коде как раз задаются разрешения для адаптивной верстки. В частности, здесь указано, что ширина (wight) должна всегда составлять 100% от ширины рабочей области веб-обозревателя, тогда как высота (height) подстраивается автоматически.

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

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

Можно сделать еще проще. Чтобы проверить, работает ли адаптивный дизайн, нужно зажать CTRL, а затем нажать на "+" или "-". После этого действия страница должна увеличиться или уменьшиться соответственно, но элемент, к которому применена адаптивная верстка, сохранит соотношение своих пропорций (или сделает что-то другое, то, что было указано в правилах).

Инструменты, упрощающие верстку адаптивного дизайна

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

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

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

*Bootstrap – это ПО с открытым исходным кодом, разработанной корпорацией Twitter Inc. Распространяется на бесплатной основе и имеет широкое сообщество, у которого всегда можно попросить совета.

Приветствую вас, случайные посетители и постоянные читатели блога сайт!

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

Краткий план статьи:

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

Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная с помощью CSS.

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

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

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){ }

Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

Самые важные разрешения экрана, при адаптивной верстке

• 320 px - Мобильные устройства (портретная ориентация);
• 480 px - Мобильные устройства (альбомная ориентация);
• 600 px - Небольшие планшеты;
• 768 px - Планшеты (портретная ориентация);
• 1024 px - Планшеты (альбомная ориентация)/Нетбуки;
• 1280 px и более - PC.

Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

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

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

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

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

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

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

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

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

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

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

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

Чем отличается адаптивная верстка от других подходов к верстке сайта?

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

фиксированная верстка. Блоки не поменяют свою ширину даже при изменении размера окна браузера. При просмотре сайта на мониторе с низким расширением появится полоса прокрутки;

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

С точки зрения SEO адаптивная верстка также имеет свои преимущества. Здесь соблюдается принцип «один сайт - один адрес», в отличие от варианта с созданием мобильной версии. В случае с мобильной версией приходится отдельно нарабатывать репутацию и посещаемость ресурса. Так как страницы мобильных версий часто «склеены» с основными сайтами, они не очень хорошо ранжируются поисковиками. Адаптивный дизайн и верстка позволят всю ссылочную массу сосредоточить на одном единственном ресурсе.

Что нужно знать специалисту по адаптивной верстке.

Чтобы научиться адаптивной верстке, следует иметь хороший уровень знания HTML, CSS и . Отвечая на вопрос, заложенный в теме статьи: теорию нужно совмещать с практикой уже с начала обучения. Идеальный вариант - это видео уроки по адаптивной верстке, делающие упор на практические занятия, сложность которых растет по мере изучения основ.

К минимальному пакету джентльмена верстальщика также относится Adobe Photoshop и основы работы с изображениями. Если вы готовитесь верстать проекты не крупнее одностраничников, то можете использовать Adobe Muse и подобные ему инструменты.

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

Где находится грань между версткой, веб-дизайном и фронтендом?

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

Когда необходимо разработать сложный интерактивный интерфейс, от верстальщиков требуют определенных . Здесь даже может понадобиться тесная работа с базами данных. Как вы поняли, грань между Front-End и версткой очень и очень тонкая.

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

Фреймворки и препроцессоры: быть или не быть?

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

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

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

Еще один совет: экономьте время на написание CSS с помощью препроцессора. И это очень важно, независимо, используете вы какой-нибудь фреймворк, или нет. Так как 60-70% верстки занимает написание CSS, этот этап логично автоматизировать. Я лично пользуюсь препроцессором Sass, однако, вы можете использовать любой другой, что вам подходит.

Адаптивная верстка сайта - уроки для начинающих . Все чаще читатели блога Вебсовет задают в своих письмах вопросы по адаптивной верстке сайта. Окей! Раз есть вопросы, то вэлкам! Этим постом я открываю новую рубрику на блоге, посвященную исключительно адаптивной верстке сайтов.

Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) фишке, краткое пояснение:

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

Здесь следует дать одно очень важное разъяснение касательно различных похожих определений в современном веб-дизайне, а именно: адаптивный (adaptive) и отзывчивый (responsive) веб-дизайн . Очень многие ошибочно полагают, что это одно и то же. Но это не так.

Адаптивный (adaptive) vs отзывчивый (responsive)

Во-первых, необходимо различать адаптивный веб-дизайн (adaptive web design) и адаптивную верстку (adaptive layout) . Это совершенно разные понятия. Адаптивный веб-дизайн - это глобальный подход к проектированию сайта, тогда как адаптивная верстка - всего лишь частный случай способа верстки для отзывчивого (responsive) веб-дизайна .

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

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

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

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

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

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

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

1. Все элементы верстки являются «резиновыми» (flexible) - их размеры зависят от размера экрана отображающего устройства.

2. Медиа-запросы (Media Queries) - отдельная часть файла стилей, задающая различные стили в зависимости от размеров экранов отображающих устройств и их расположения в пространстве (portrait или landscape).

Что касается «резиновости», то эта плюшка задается старым добрым способом:

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

#content {
max-width: 1200px;
}

Это если вы не хотите, чтобы ширина сайта превышала 1200 пикселей (на ваше усмотрение). В этом есть определенный сенс. Дело в том, что комфортная ширина читаемого текста не более 10 – 12 слов в строке. Если статья будет растягиваться (например, при просмотре сайта на телевизоре) от края до края, то читать такой текст будет весьма затруднительно.

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

img, embed, video {
max-width: 100%;
}

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

А вот о медиа-запросах мы поговорим подробно в следующий раз. Оставайтесь на связи!

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

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