Начните создавать адаптивные веб-сайты и приложения прямо здесь

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

Единицы CSS

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

Есть три разных типа модулей CSS.

Абсолютные единицы (фиксированные)

  1. px - пиксели (чаще всего)
  2. мм - миллиметры
  3. см - сантиметры
  4. в дюймах
  5. pt - точки (4/3 пикселя)
  6. pc - pica / 12 баллов (* 12 баллов)

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

Относительные единицы (относительно размера шрифта)

  1. em - относительно размера шрифта элемента
  2. ex - относительно высоты шрифта X
  3. ch - относительно ширины 0 шрифта
  4. rem - относительно размера шрифта корневого шрифта

Относительные единицы (относительно области просмотра)

  1. vh - высота окна просмотра
  2. vw - ширина окна просмотра
  3. vmin
  4. vmax

Наиболее распространенные относительные единицы - rem, em, vh и vw.

Когда следует использовать em или rem?

Используйте em для полей и отступов и rem для размера шрифта, чтобы элементы масштабировались следующим образом:

Не так:

Проценты

% занимает процент области просмотра родительского элемента.

Это очень часто используется в адаптивном дизайне. Важно отметить, что по умолчанию для родителей установлено значение 100%.

Гибкие коробки

Основная идея гибкого макета - дать контейнеру возможность изменять ширину / высоту (и порядок) своих элементов, чтобы наилучшим образом заполнить доступное пространство (в основном, чтобы приспособиться ко всем типам устройств отображения и размерам экрана). - CSS-Уловки

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

Flexbox Froggy - отличная игра, чтобы научиться использовать гибкие блоки, начиная от очень простых концепций, таких как flex: centre, до более сложных действий.

Медиа-запросы

Медиа-запросы позволяют добавлять или изменять CSS в зависимости от того, выполняется ли условие медиа-запроса. Например:

Это говорит о запуске кода, если область просмотра меньше 600 пикселей. Это не лучший пример реального приложения, так как программа вряд ли изменит цвета в зависимости от размера области просмотра. Более реалистичный пример - отображение гамбургера, если ширина меньше 480 пикселей (размер телефона в портретном режиме). Если ширина больше 480 пикселей, отобразите элементы меню на панели навигации.

Ваш основной медиа-запрос выглядит так:

@media media type and (condition: breakpoint)

Вот некоторые примеры медиа-запросов:

Media types: all, print, screen, speech

Я перечислил некоторые условия ниже.

max и min-width для указания типов устройств:

И используя landscape или portrait:

Итак, теперь, когда основы понятны, давайте приступим к применению этих принципов.

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

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

Итак, если вы сравните два разных дизайна, вы увидите, как меню меняется между гамбургер-меню и обычным меню. Это означает, что с обоими компонентами вам придется создавать и переключать видимость двух меню. Вы также заметите, что некоторые элементы расположены в строках на рабочем столе и в столбце на мобильном устройстве. Например, «Обувь / аксессуары» - это то место, где вы можете добавить гибкие блоки и переключать flex-direction между строками и столбцами. Это позволяет очень легко изменить макет.

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

Заключение

Это были разные концепции, которые я использовал, чтобы моя платформа была отзывчивой. Спасибо за прочтение.