5 мощных техник адаптивного веб-дизайна

5 мощных техник адаптивного веб-дизайна

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

Адаптивные изображения

Гибкие изображения – главный вопрос адаптивного дизайна. К счастью, довольно просто можно сделать свои изображения «гибими». Нижеприведенный код CSS гарантирует, что изображения будут максимально большими. Например, если изображение показывается внутри контейнера шириной в 600px, изображение будет 600px. Измените контейнер до 350px, и изображение автоматически уменьшится до максимально доступной ширины, в данном случае – 350 пикселей.

Адаптивное видео HTML5

Раз спецификация HTML5 позволяет легко вставлять на свои страницы видеоролики, то почему бы этим не пользоваться? Сделать адаптивное видео HTML5 точно так же легко: просто добавьте в свой файл css следующий код и на этом все!

Адаптивное видео YouTube

Как я вам только что показал, нет ничего сложного в том, чтобы сделать изображения или видеоролики html5 адаптивными. А как насчет видео с популярных сайтов? В самом деле, YouTube – самый знаменитый видео-хостинг, так что велики шансы на то, что вам однажды придется работать в видеороликами YouTube. Сначала рассмотрим этот код HTML:

Затем добавим в файл CSS следующее:

Ну вот, теперь ваши видеоролики YouTube адаптивные! Этот код также отлично работает с видеороликами Vimeo, что видно из примера ниже:

Адаптивное навигационное меню

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

Вот простая методика, которую можно внедрить на любом сайте. Начнем с HTML – создадим два меню: стандартное ul для обычных дисплеев и выпадающее select для мобильных устройств:

А вот CSS. Здесь ничего сложного: мы по умолчанию скрываем select, а показываем его, только если ширина документа меньше 960px.

Адаптивные таблицы данных

Таблицы и адаптивный дизайн обычно не очень ладят между собой. Но вот действительно полезная техника, созданная вам в помощь разработчиком Крисом Койером (Chris Coyier) для адаптивных таблиц. Давайте начнем с создания обычной таблицы. Вот HTML…

И CSS:

У нас получилась таблица с обычными стилями, теперь сделаем ее адаптивной. Мы собираемся сделать ничто иное, как заставить ее вести себя не как таблица, установив каждый связанный с таблицей элемент на block. Затем сохраним ее исходные черно-белые полосы, при этом каждая строка становится сама по себе таблицей, но шириной как экран. Не нужно горизонтальной прокрутки! Затем для каждой «ячейки» мы применим сгенерированный CSS контент (:before) для прикрепления метки, чтобы знать, что означает каждый фрагмент данных.

Автор: Jean

Источник: «//www.catswhocode.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)