Что такое адаптивный веб-дизайн? Это относительно новый метод, впервые описанный в середине 2010 года Итаном Маркоттом в одноименной статье A List Apart . Проще говоря, это включает в себя предоставление ряда макетов сайтов, адаптированных к разной ширине экрана, и последующее соответствующее обслуживание этих макетов благодаря использованию медиазапросов CSS3 .
В очень удачных словах Джеффри Зельдмана:
Это то, к чему некоторые из нас стремились с «жидким» веб-дизайном еще в 1990-х, только это не отстой.
Это все хорошо, но как вы используете это? В конце концов, крутые дети все это делают, так почему бы и нет?
В этом коротком уроке я расскажу вам, как сделать довольно простой дизайн страницы и сделать его адаптивным с помощью Less Framework 3 от Joni Korpi . «Ack!» Я слышу, как вы кричите; «CSS-фреймворки для неудачников!» Никогда не бойтесь. Меньше — это всего лишь «более или менее» рамки, по словам ее создателя. Нет ни одного из этих уродливых классов «.grid-24» — вместо этого вы просто найдете несколько стилей сброса, некоторые разумные типографские значения по умолчанию и четыре медиазапроса с соответствующей шириной тела для четырех различных общих разрешений. Эти четыре макета содержат некоторые полезные комментарии о том, как вы могли бы разделить их на сетки с золотым сечением, но решение сделать это или нет — полностью ваше.
Таким образом, если вы никогда не тестировали множество медиа-запросов или адаптивного дизайна, Less — это хороший способ начать работу и увидеть некоторые результаты довольно быстро. Вероятно, вы захотите скорректировать точные детали медиа-запросов по мере развития вашего дизайна, но это будет легко, так как нет никакого «каркасного» багажа, который бы вас удерживал. Меньше — просто полезная отправная точка.
Итак, давайте сделаем это!
Меньше Framework 3
Для начала зайдите на http://lessframework.com/ . Сам сайт является хорошей иллюстрацией способности адаптивного дизайна, поэтому возьмите в руки маркеры изменения размера вашего браузера и посмотрите, как страница реагирует на различные размеры области просмотра. Когда вы закончите играть (не волнуйтесь, я могу подождать), перейдите к нижней части страницы. Доступно несколько вариантов настройки, а также текстовые области, содержащие выходной CSS и скелет HTML.
Для целей нашего примера вы можете оставить все опции по умолчанию отмеченными. Скопируйте HTML и CSS в файлы с соответствующими именами и обновите источник тега style в файле HTML, чтобы он указывал на файл CSS.
Если вы сразу же откроете HTML-файл в своем браузере, все, что вы увидите, это большой синий прямоугольник на странице. Измените размер своего браузера, и вы увидите, как он корректирует свои размеры, как вы и надеялись. С этой базовой линией пришло время начать работу над нашим собственным адаптивным макетом.
Расположение
Для иллюстрации мы выложим простой рецепт. Я сделал быстрый творческий поиск общего достояния, чтобы найти какой-то контент для использования. Я нашел рецепт индийского нута и тыквенного супа из кухни Лизы .
Для нашей страницы мы хотим иметь основной блок, состоящий из ингредиентов и инструкций рецепта, двух блоков боковой панели с изображением супа и списка соответствующих рецептов, соответственно, и нижнего колонтитула, определяющего источник содержимого.
Платформа Less предлагает четыре сетки, по одной для каждой ширины тела. Они состоят из 60-пиксельных столбцов с 24-пиксельными желобами. Самый узкий макет, в первую очередь для мобильных устройств в портретной ориентации с шириной экрана 320 пикселей, составляет три колонки. Далее, есть пять колонок с шириной 480px для мобильных телефонов с высоким разрешением, узких браузеров или мобильных устройств в ландшафтном режиме. Макет из восьми столбцов по умолчанию, который также будет использоваться в браузерах, в которых отсутствует поддержка медиазапросов (включая, как вы уже догадались, Internet Explorer), предназначен для старой доброй ширины экрана 768 пикселей, а также будет полезен для планшетов и нетбуков. Наконец, 13-колоночный макет предназначен для экранов шириной более 1280 пикселей, включая большинство современных настольных компьютеров и ноутбуков с хорошими браузерами.
Для нашего рецепта, мы будем держать макет очень простым. У нас будет дизайн с одним столбцом для двух более узких макетов и дизайн с двумя столбцами (с изображением рецепта и предлагаемыми рецептами на боковой панели) для двух более широких макетов. Самый широкий макет имеет тринадцать 60-пиксельных столбцов, поэтому мы разделим эти 8-5 между контентом и боковой панелью. Следующий самый широкий — восемь столбцов, которые мы разделим на 5-3.
Разметка
Поскольку этот пример является исключительно иллюстративным, и поскольку большинство читателей SitePoint просматривают Интернет с помощью современных, сложных браузеров, я буду использовать новомодные семантические элементы HTML5 для разметки рецепта. Это крутой способ познакомиться с ними в ожидании их окончательного мирового господства.
Вот скелет:
<body> <article> <header> <h1>Indian Chickpea and Pumpkin Soup</h1> </header> <aside> <img src="images/pumpkin_soup2.jpg" /> </aside> <div> <p>Winter squash soups are a healthy ... </p> <section> <header> <h2>Soup:</h2> </header> <ul> <li>¾ cup dried chickpeas</li> <li> ... </li> </ul> </section> <section> <header> <h2>Tempering:</h2> </header> <ul> <li>1 tablespoon olive oil</li> <li> ... </li> </ul> </section> <section> <p>Rinse the chickpeas ... </p> </section> </div> <aside> <header> <h1>Related Recipes</h1> </header> <p>If you liked this recipe you may also enjoy:</p> <ul> <li><a href="#">Toor Dal Pumpkin Soup</a></li> <li> ... </li> <ul> </aside> <footer> <p>This recipe is republished from ... >.</p> </footer> </article> </body>в<body> <article> <header> <h1>Indian Chickpea and Pumpkin Soup</h1> </header> <aside> <img src="images/pumpkin_soup2.jpg" /> </aside> <div> <p>Winter squash soups are a healthy ... </p> <section> <header> <h2>Soup:</h2> </header> <ul> <li>¾ cup dried chickpeas</li> <li> ... </li> </ul> </section> <section> <header> <h2>Tempering:</h2> </header> <ul> <li>1 tablespoon olive oil</li> <li> ... </li> </ul> </section> <section> <p>Rinse the chickpeas ... </p> </section> </div> <aside> <header> <h1>Related Recipes</h1> </header> <p>If you liked this recipe you may also enjoy:</p> <ul> <li><a href="#">Toor Dal Pumpkin Soup</a></li> <li> ... </li> <ul> </aside> <footer> <p>This recipe is republished from ... >.</p> </footer> </article> </body>в<body> <article> <header> <h1>Indian Chickpea and Pumpkin Soup</h1> </header> <aside> <img src="images/pumpkin_soup2.jpg" /> </aside> <div> <p>Winter squash soups are a healthy ... </p> <section> <header> <h2>Soup:</h2> </header> <ul> <li>¾ cup dried chickpeas</li> <li> ... </li> </ul> </section> <section> <header> <h2>Tempering:</h2> </header> <ul> <li>1 tablespoon olive oil</li> <li> ... </li> </ul> </section> <section> <p>Rinse the chickpeas ... </p> </section> </div> <aside> <header> <h1>Related Recipes</h1> </header> <p>If you liked this recipe you may also enjoy:</p> <ul> <li><a href="#">Toor Dal Pumpkin Soup</a></li> <li> ... </li> <ul> </aside> <footer> <p>This recipe is republished from ... >.</p> </footer> </article> </body>в<body> <article> <header> <h1>Indian Chickpea and Pumpkin Soup</h1> </header> <aside> <img src="images/pumpkin_soup2.jpg" /> </aside> <div> <p>Winter squash soups are a healthy ... </p> <section> <header> <h2>Soup:</h2> </header> <ul> <li>¾ cup dried chickpeas</li> <li> ... </li> </ul> </section> <section> <header> <h2>Tempering:</h2> </header> <ul> <li>1 tablespoon olive oil</li> <li> ... </li> </ul> </section> <section> <p>Rinse the chickpeas ... </p> </section> </div> <aside> <header> <h1>Related Recipes</h1> </header> <p>If you liked this recipe you may also enjoy:</p> <ul> <li><a href="#">Toor Dal Pumpkin Soup</a></li> <li> ... </li> <ul> </aside> <footer> <p>This recipe is republished from ... >.</p> </footer> </article> </body>в<body> <article> <header> <h1>Indian Chickpea and Pumpkin Soup</h1> </header> <aside> <img src="images/pumpkin_soup2.jpg" /> </aside> <div> <p>Winter squash soups are a healthy ... </p> <section> <header> <h2>Soup:</h2> </header> <ul> <li>¾ cup dried chickpeas</li> <li> ... </li> </ul> </section> <section> <header> <h2>Tempering:</h2> </header> <ul> <li>1 tablespoon olive oil</li> <li> ... </li> </ul> </section> <section> <p>Rinse the chickpeas ... </p> </section> </div> <aside> <header> <h1>Related Recipes</h1> </header> <p>If you liked this recipe you may also enjoy:</p> <ul> <li><a href="#">Toor Dal Pumpkin Soup</a></li> <li> ... </li> <ul> </aside> <footer> <p>This recipe is republished from ... >.</p> </footer> </article> </body>
Рецепт помечен как article , содержащая header , два в aside s (по одному для каждого изображения и список связанных рецептов), div для самого рецепта и footer . Внутри div рецепта есть несколько section , по одному для каждого набора ингредиентов и список инструкций.
Стили
Давайте начнем с макета из восьми столбцов по умолчанию. Прокрутите вниз в своей таблице стилей к этому разделу (который будет чуть ниже стилей сброса и настроек по умолчанию). Нашей первой задачей будет установить ширину основного содержимого div и aside , а также разместить их напротив друг друга:
article > div { float: left; width: 348px; margin-right: 24px; margin-bottom: 24px; padding: 24px; background: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } article > aside { float: right; width: 228px; }
Вы заметите, что я использую дочерний селектор (>) . Конечно, это работает ради примера, но вам может потребоваться использовать более традиционные селекторы, в зависимости от того, какие браузеры вам нужно поддерживать, и в этом случае вам нужно будет добавить некоторые атрибуты class и id в вашу разметку.
Математика здесь проста: основной div имеет пять столбцов шириной и включает четыре желоба между этими столбцами. Итак, (5 x 60) + (4 x 24) = 396. С отступом 24px с каждой стороны это оставляет 348px для ширины div . Для aside s математика имеет вид (3 x 60) + (2 x 24) = 228. Затем полная ширина макета составляется с полем в 24 пикселя для содержимого div .
Эти стили уже дали нам достаточно хороший макет из двух столбцов, хотя есть некоторые проблемы. Во-первых, изображение слишком велико для столбца, в котором оно находится. Это достаточно легко исправить (я добавил некоторые границы, а также небольшую тень):
article > aside img { width: 218px; padding: 4px; background-color: #FFFFFF; border: 1px solid #DDDDDD; -webkit-box-shadow: 2px 2px 2px rgba(0,0,0, 0.2); -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2); }
Я также собрал несколько стилей по умолчанию для заголовков, абзацев и списков, но поскольку они не относятся к макету, я пропущу их здесь. Вы всегда можете проверить исходный код финального примера, чтобы увидеть их.
Хорошо, теперь, когда у нас есть макет по умолчанию, давайте перейдем к таблице стилей. Следующий макет, как вы увидите, — сверхширокий 1280px. В ваших собственных адаптивных проектах вам может потребоваться перейти от двухколоночного дизайна к трех- или даже четырехколонному дизайну и реорганизовать весь макет, чтобы лучше использовать все доступное пространство. Но для иллюстрации давайте просто увеличим размеры существующего макета:
@media only screen and (min-width: 1212px) { body { padding: 96px 72px 0; width: 1068px; position: relative; } article > div { width: 600px; margin-bottom: 24px; } article > aside { width: 396px; } article > aside img { width: 386px; } }
Проверьте синтаксис объявления @media : он утверждает, что содержащиеся правила CSS должны применяться только к экранам, а затем только к тем, которые имеют минимальную ширину 1212 пикселей.
С этими правилами вы сможете расширить окно браузера и увидеть, как дизайн увеличится до 1212 пикселей. Легко и приятно!
Наконец, давайте разберемся с узкими одноколоночными дисплеями для мобильных устройств и экранами меньшего размера. Они оба требуют, чтобы мы переписали объявления с float чтобы хранить все в одном столбце. Для самого маленького макета, в 320px, мы также уменьшим все размеры шрифта, чтобы сохранить читаемую длину строки:
@media only screen and (max-width: 767px) and (min-width: 480px) { body { padding: 60px 42px 0; width: 396px; -webkit-text-size-adjust: 100%; } article > div, article > footer, article > aside { float: none; clear: none; } article > div { width: 348px; } article > aside img { width: 386px; } } @media only screen and (max-width: 479px) { body { padding: 48px 46px 0; width: 228px; -webkit-text-size-adjust: 100%; font-size: 13px; line-height: 18px; } article > div { width: 192px; padding: 18px; margin-bottom: 18px; } article > header > h1 { font-size: 26px; line-height: 36px; } article > div > header > h2 { font-size: 16px; line-height: 24px; } article > div, article > footer, article > aside { float: none; clear: none; } p, section, aside, ul { margin-top: 18px; } }
Вот и все! Теперь у вас есть полностью адаптивный дизайн, который адаптируется к ширине экрана от вашего смартфона до широкоэкранного офисного монитора.
Взгляните на демо, чтобы увидеть его в действии.
Финальные заметки
Адаптивные макеты — отличный способ сделать ваши существующие сайты более доступными для более широкого круга устройств. Однако это не означает, что вы можете назвать это днем, когда речь идет о вашей мобильной стратегии. Как отмечают Джефф Крофт и другие, хороший мобильный сайт — это гораздо больше, чем узкий дисплей. Тем не менее, в зависимости от ваших ресурсов, вашей аудитории и направленности вашего сайта, полностью адаптивный макет является по меньшей мере сильным первым шагом в направлении поддержки мобильных устройств.
Less Framework 3, которая на самом деле не является фреймворком в традиционном смысле этого слова, является хорошим способом экспериментировать с адаптивными проектами с использованием компоновок сетки и получить представление о синтаксисе и структуре CSS, необходимых для такой работы. Перейдя к созданию собственных адаптивных дизайнов, вы можете оставить их позади и создать свой CSS с нуля, или вы можете использовать его в качестве схемы для запуска собственных адаптивных макетов.