Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
В частности, эту технологию активно применяют, чтобы сайт одинаково отображался на различных типах устройств: компьютерах/ноутбуках и смартфонах/планшетах с разными размерами дисплеев.
Адаптивная сайта сегодня создается при помощи языка разметки 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. Распространяется на бесплатной основе и имеет широкое сообщество, у которого всегда можно попросить совета.
Адаптивная верстка: что это и как использовать
Адаптивная верстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.
Регулировка разрешения экранаВ принципе, можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, да и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике мы имеем целый спектр разнообразных разрешений:
Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?
Частичное решение: делаем все гибкимКонечно, это не идеальный способ, но он устраняет большую часть проблем.
Итан Маркотт (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 используется для объектов, которые нужно спрятать.
Вот наша разметка:
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; }
Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно адаптировать дизайн под любые устройства и экраны.
Чем более популярными становятся мобильные устройства, тем сильнее ощущается дискомфорт при скроллинге большинства сайтов. Именно поэтому, начиная с 2012 года, веб-мастерами стало использоваться решение, делающее просмотр ресурсов на экранах с небольшим разрешением более комфортным, - адаптивная вёрстка.
Современная тенденцияСегодня около пяти миллиардов людей на Земле используют мобильные телефоны, при этом треть из них имеют смартфоны. Поэтому мобильный трафик приобретает всё большее значение для владельцев сайтов. Вероятно, такой источник посетителей со временем будет только расти.
Поисковые системы оперативно прореагировали на такую тенденцию. Большие корпорации "Яндекс" и Google внесли существенные изменения в свои алгоритмы ранжирования сайтов в поисковой выдаче с учётом наличия адаптивной вёрстки и дизайна. Проще говоря, веб-ресурсы, оптимизированные для мобильных телефонов, смартфонов и планшетов, будут иметь некоторое преимущество перед своими конкурентами.
Определение адаптивной вёрсткиАдаптивная вёрстка - метод создания каркаса веб-страницы, автоматически меняющей расположение блоков в соответствии с устройства, на котором она просматривается. То есть при таком подходе создаются отдельные стили для самых разных разрешений. Такой эффект достигается особым написанием CSS-файлов.
Раньше проблема решалась несколько иначе. Разработчикам приходилось совершать гораздо больше «телодвижений», создавая вёрстку и дизайн основной версии сайта и то же самое делая для мобильной. В зависимости от экрана устройства, на котором просматривался интернет-проект с имеющейся мобильной платформой, запускалась подходящая версия сайта.
Такой подход во многом себя не оправдывал, и большинство веб-мастеров так и не взялись за версии. Теперь на смену такому порядку пришла адаптивная вёрстка. Создавая каркас сайта при помощи такой технологии, веб-мастер концентрирует все свои усилия на создании одной версии проекта, а посетители могут с одинаковым уровнем комфорта просматривать его как на большом экране компьютера, так и на мобильном телефоне, смартфоне или планшете.
Достоинства адаптивного макетаКакие достоинства имеет адаптивная вёрстка сайтов? Ранее было отмечено, что плюсом является корректное отображение всех блоков страницы на любом устройстве. Также положительным аспектом такого подхода в создании шаблона можно назвать скорость реализации изменений. Что это значит?
При наличии у сайта двух платформ внесённые в вёрстку изменения нужно было сначала реализовать в рабочей версии, а после - в мобильной. Если правки в коде были довольно существенными, то процесс внесения таких изменений мог сильно затянуться. При адаптивной вёрстке работа над сайтом ведётся в одном файле. Изменения, внесённые в макет веб-страницы, будут одинаково скоро отображаться как в рабочей версии, так и в мобильной.
Минусом такого подхода некоторые веб-мастера называют сложность его реализации. Но с появлением CSS 3 создать шаблон адаптивной вёрстки стало совсем просто. Даже не самые опытные веб-мастера могут сделать свой сайт удобным для просмотра на мобильных устройствах.
Принципы и особенности адаптивной вёрсткиКакие принципы лежат в основе метода адаптивной вёрстки в веб-дизайне?
Использование «резинового» типа макета.
- «Резиновые» изображения.
Использование медиазапросов (media-queries).
Необходимость думать о мобильных устройствах с самого начала создания вёрстки.
Из этих основополагающих принципов такого метода создания шаблона вытекают следующие особенности адаптивной вёрстки:
1. Проектирование и создание дизайна сайта с учётом работы на всём спектре разрешений: от мобильных до широкоформатных дисплеев.
2. Вёрстка с помощью каскадных таблиц стилей с использованием технологии медиазапросов, появившейся в CSS 3.
3. Программирование на стороне как клиента, так и сервера для передачи мобильным устройствам изображения меньшего объёма и разрешения.
Важный аспект, с учётом которого создаётся адаптивная вёрстка, - разрешения матрицы популярных электронных устройств. Такой подход в разработке дизайна сделает просмотр веб-страниц на любом экране весьма комфортным. Но как узнать, какие из них стоит включать в стили?
С чего начать вёрстку адаптивного макета?Большинство сайтов сделаны так, что на экранах смартфонов и планшетов появляются полосы прокрутки, которые не столь удобны для сёрфинга, а дизайн и вёрстка многих интернет-проектов просто «плывут». На сайтах, созданных для обучения веб-дизайну, собраны самые разные разрешения экранов различных устройств, под которые стоит верстать страницы своего сайта.
Адаптивная вёрстка, примеры которой можно встретить довольно часто, имеет массу достоинств. Что следует помнить при таком подходе к созданию макета страниц?
Приступив к работе над шаблоном, важно периодически тестировать, насколько удачно отображается контент и блоки макета на разных экранах. Для этого порой достаточно просто изменить ширину окна браузера. Файл со стилями получает медиазапрос и меняет расположение блоков, внося существенные изменения. Хорошим инструментом для тестирования шаблона адаптивной вёрстки могут стать сайты, имитирующие экраны мобильных устройств разных моделей. Такие сервисы позволят внимательно рассмотреть и оценить, как смотрится дизайн на дисплеях самых разных мобильных устройств.
Хотя технология такого адаптивного макета не столь проста, её освоение принесёт плоды уже очень скоро.
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
В настоящее время посетители заходят на сайты не только с настольного компьютера, но и с ноутбука, планшета, смартфона. При этом на устройствах с маленьким экраном часто текст слишком мелкий, ссылки практически некликабельны, элементы управления расположены слишком близко друг от друга.
Чтобы устранить эти недостатки стали разрабатывать отдельные мобильные версии сайтов. Но это долго, дорого и неудобно в поддержке.
Решение возникшей проблемы – адаптивная верстка , при которой CSS-стили меняются динамически для разной ширины окна браузера.
ПримерПример адаптивной верстки - сайт domportretov.ru , где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:
Разработку адаптивной верстки чаще всего проводят от уже существующего сайта для большого экрана к экранам меньшего размера. Проверять результат работы можно разными способами:
Мобильные браузеры по умолчанию принимают страницу сайта за страницу для обычного компьютера и масштабирует ее по ширине экрана телефона. В результате текст становится мелким, и посетителю, чтобы его прочесть, приходится увеличивать масштаб страницы.
Для корректировки размеров и масштабирования страницы с учетом ширины экрана устройства используют метатег 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 | Все типы. |
| Принтеры и другие печатающие устройства. | |
| 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, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн - это просто! В этой статье представлено 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 масштабируется текстовое поле:
5. Перенос слов (демо)
При помощи CSS можно переносить непереносимые текстовые конструкции:.break-word { word-wrap: break-word; }
