Адаптивная верстка подразумевает под собой верстку, при которой внешний вид сайта удобен для взаимодействия с пользователем на различных устройствах, будь то планшет, мобильный телефон, ноутбук или настольный компьютер. Иначе говоря, при адаптивной верстке блоки сайта динамически подстраиваются под различные разрешения экрана.
Мета тег Viewport
В этом видеоуроке мы обсудим что такое Viewport, поговорим о мета теге viewport, для чего он предназначен, какую роль играет в адаптивной верстке и рассмотрим все его особенности.
Медиа-запросы. Часть 1
В этом уроке мы приступим к изучению медиа-запросов, которые являются неотъемлемой частью в адаптивной верстке и позволяют в зависимости от условия выполнять тот или иной css код.
Медиа-запросы. Часть 2
В этом видео мы продолжаем изучение медиа-запросов и перейдем к рассмотрению более продвинутых характеристик.
Адаптивная графика
В данном уроке мы поговорим об адаптивной графике и разберем различные техники для работы с адаптивными изображениями.
Адаптивное видео
Сегодня очень популярен видео-контент. Независимо от того, какой сайт: интернет-магазин, блог, сайт-визитка, лендинг – с высокой долей вероятности на нем будет присутствовать видео. И видео тоже должно хорошо отображаться на экранах различных устройств.
Адаптивная типографика
В данном уроке мы поговорим с вами об адаптивной типографике. Как работать с текстом используя относительные единицы измерения, а также динамически изменять размер шрифта в зависимости от вьюпорта.
Создание адаптивного меню
Навигация – это очень важная часть сайта, которая должна быть доступна как в десктопной, так и в мобильной версии сайта. Как правило, навигация располагается в верхней части экрана. Но на небольших экранах смартфонов не хочется тратить драгоценное место первого экрана на отображение меню. Лучше как можно выше расположить полезный контент страницы. Поэтому при адаптивной верстке, созданию меню уделяют особое внимание. В данном уроке мы на практике увидим создание адаптивного меню с нуля.
Адаптация двухколоночного макета
Двухколоночным сайтом называют такой сайт, в котором центральная часть сайта состоит из двух колонок. В одной располагается основной контент страницы, в другой располагается навигация по разделам и рекламные блоки, блоки подписки и так далее. В данном уроке мы рассмотрим практический пример реализации двухколоночного адаптивного макета.
Адаптация трех колоночного макета
Трехколоночные сайты – это сайты, в которых в основной его части используется три колонки. В центральной колонке располагается основной контент, а также присутствуют две колонки: справа и слева. Такая структура сайтов менее популярна, чем двухколоночная структура. Встречаются трехколоночные сайты реже. Как правило, эти сайты достаточно объемные по контенту. Трехколоночные сайты сложнее адаптировать.
Адаптация таблиц
Таблицы адаптировать сложнее всего, потому что таблицы в себе несут смысловой контент, перестроив который, можно полностью нарушить его смысл. В таблицах, как правило, находятся строго упорядоченные данные. Если картинки, видео и даже карты google или яндекс мы можем просто сжать, либо уменьшить в размерах. Если меню сайта мы можем полностью перестроить, то перестроив таблицу, мы можем сделать так, что ей невозможно будет пользоваться, либо она будет показывать данные некорректно.
Автор: webformyself
