Изучить отзывчивый веб-дизайн за 5 минут / Хабр
Привет, Хабр! Представляю вашему вниманию перевод статьи «Learn responsive web design in 5 minutes» автора Per.
В этой статье я научу вас многим приёмам отзывчивого дизайна за 5 минут. Этого, очевидно, недостаточно для правильного изучения, но здесь вы найдёте обзор на следующие наиболее важные методы:
- Относительные единицы измерения CSS
- Медиа-запросы
- Flexbox
- Отзывчивая типографика
Относительные единицы измерения CSS
В основе отзывчивого веб-дизайна лежат относительные единицы измерения CSS. Это единицы, которые получают свои значения от некоторых внешних значений. Это удобно, поскольку позволяет, к примеру, пропорционально масштабировать ширину изображения относительно ширины окна браузера.
Самые распространённые относительные единицы измерения:
- %
- em
- rem
- vw
- vh
В этом пункте мы начнём с процента % как единицы измерения, а затем в последнем разделе рассмотрим единицу rem.
Допустим, у нас есть очень простой сайт как тот, что ниже:
Его HTML-код следующий:
<body>
<h2>Welcome to my website</h2>
<image src="path/to/img.png">
</body>Как вы можете понять из GIF ниже, наше изображение по умолчанию будет иметь фиксированную ширину:
Изображение не особенно отзывчиво, поэтому давайте изменим ширину на 70%. Мы просто пропишем следующее:
.myImg {
width: 70%;
}Это устанавливает ширину изображения равной 70% от ширины исходного элемента, который прописан в теге . Поскольку тег охватывает всю ширину экрана, изображение всегда будет составлять 70% самого окна браузера.
Вот результат:
Вот так легко создать отзывчивое изображение.
Использование медиа-запросов для улучшения мобильной версии сайта
У нас есть одна проблема с нашей отзывчивой версткой – она выглядит странно на очень маленьких экранах.
Равная 70% ширина должна уменьшаться при просмотре на мобильном телефоне. Просто сами взгляните:
Сделать так, чтобы изображение выглядело лучше в таком случае – задача как раз для медиа-запросов. Они позволяют применять различные стили, например, в зависимости от ширины экрана. Мы можем прописать, что если ширина экрана меньше 768px, то нужно использовать другой стиль.
Вот как мы создаем медиа-запрос в CSS:
@media (max-width: 768px) {
.myImage {
width: 100%
}
}Этот блок CSS будет применяться только в том случае, если ширина экрана меньше 768 пикселей.
Вот результат:
Как видите, страница имеет breakpoint (контрольную точку), где изображение становится шире: когда окно браузера имеет ширину 768px, ширина изображения меняется с 70% на 100%.
Навигационное меню с использованием Flexbox
Далее идёт Flexbox. Вы просто не сможете понять отзывчивость, не познакомившись с Flexbox.
Когда Flexbox был представлен несколько лет назад, он изменил отзывчивый дизайн, поскольку данный модуль много облегчает расположение элементов вдоль оси.
Чтобы использовать Flexbox, мы сделаем наш сайт немного сложнее, добавив навигационное меню над заголовком. Вот HTML-код для этого:
<nav>
<a href="#">Home</a>
<a href="#">About me</a>
<a href="#">Contact</a>
</nav>По умолчанию это будет выглядеть как-то так:
Наши элементы меню сдвинуты в левую сторону, но это не то, что нам нужно. Мы хотим, чтобы они были равномерно выровнены по ширине страницы.
Для этого мы просто превратим контейнер в flexbox, а затем применим магическое свойство justify-content.
nav {
display: flex;
justify-content: space-around;
}
Разберёмся. Display: flex превращает в flexible box (гибкий контейнер). Justify-content: space-around сообщает браузеру, что элементы внутри гибкого контейнера должны иметь вокруг себя пространство.
Так браузер равномерно распределяет всё оставшееся вокруг трёх элементов пространство.
Вот как это выглядит. И, как вы можете заметить, сайт хорошо масштабируется:
Отзывчивая типографика: rem
Последний шаг – сделать нашу типографику отзывчивой. Видите ли, я хочу, чтобы навигационное меню и заголовок немного уменьшались в размерах, когда ширина экрана меньше 768px (наша контрольная точка, помните?).
Один из способов это сделать – уменьшить размер шрифта в медиа-запросе, например, следующим образом:
@media (max-width: 768px) {
nav {
font-size: 14px;
}
h2 {
font-size: 28px;
}
}Вышло далеко не идеально. В приложении может быть несколько контрольных точек и множество элементов (h3, h4, параграфы и так далее). В результате нам придётся отслеживать все элементы во всех различных брейкпоинтах. Нетрудно догадаться, что это создаст некоторую путаницу.
Однако, скорее всего, они будут относиться друг с другом более или менее одинаково на разных контрольных точках.
К примеру, h2 всегда будет больше параграфа.
Что, если бы был способ, позволяющий настроить один элемент, а затем сделать так, чтобы остальные размеры шрифта масштабировались относительно этого элемента?
Введите rem!
Rem в основном означает значение размера шрифта, которое вы установили для своего элемента. Типа следующего:
html {
font-size: 14px;
}</source
Так, в этом документе один rem равен 14px.
Это означает, что мы можем установить все размеры шрифта на нашем сайте в единицах rem. Например:
<source lang="xml">h2 {
font-size: 2rem;
}
nav {
font-size: 1rem;
}И тогда мы просто изменим значение размера шрифта для тега внутри нашего медиа-запроса. Это обеспечит изменение размера шрифта для наших элементов h2 и nav.
Вот как мы изменяем значение rem в медиа-запросе:
@media (max-width: 768px) {
html {
font-size: 14px
}
}
И точно так же у нас есть контрольная точка для всех наших размеров шрифта..jpg)
Вы научились настраивать размеры шрифтов, изображений и навигационного меню, чтобы они реагировали на ширину страницы, всего за каких-то 5 минут. Это замечательно, ведь вы уже сделали первые шаги к овладению очень ценными навыками создания отзывчивых веб-сайтов.
Удачного кодинга!
Потрясающая отзывчивая вёрстка с использованием CSS-областей
Веб-разработчики существенно ограничены возможностями раскладки, которые доступны на сегодняшний день. Обычно контент растягивает контейнер по вертикали, но, если по условиям макета элементы должны сохранять определённую высоту, выбор решений ограничен: можно либо добавить полосу прокрутки, либо скрыть контент, который не поместился. Спецификация CSS-областей (CSS Regions) предлагает совершенно новое решение.
Поддержка
Области являются новой частью спецификации CSS, так что на данный момент они
поддерживаются не везде, а в некоторых браузерах они находятся за флагом.
Введение в области
CSS-области дают нам возможность распределять контент между несколькими
элементами-контейнерами. Они предусматривают наличие потока, состоящего из
контента, который может быть помещён в несколько элементов, и цепочки
областей, которая является группой элементов, между которыми распределяется
поток. Поток динамически заполняет элементы в цепочке областей. При этом размер
контейнеров по вертикали можно изменять не беспокоясь, что часть контента будет
обрезана, так как контент просто перенесётся в следующий элемент цепочки.
Чтобы использовать области, начните с создания потока с заданным названием:
просто добавьте элементу с контентом свойство flow-into и присвойте ему
название вашего потока в качестве значения. Затем для каждой области, которую вы
хотите использовать в качестве контейнера для потока, укажите свойство flow-from с тем же названием потока в качестве значения. Содержимое первого
элемента будет перетекать в остальные элементы-области. На данный момент
браузеры требуют свойства с префиксом, но здесь мы используем версию без
префикса:
#myContent {
flow-into: myNamedFlow;
}
.myRegion {
flow-from: myNamedFlow;
}
HTML-разметка будет содержать элемент с контентом и каскад областей, в
которые этот контент должен распределяться. Когда мы используем области, элемент
с контентом не отображается в своей исходной позиции, а любые элементы разметки,
помещённые в элементы-области исчезнут — их место займёт контент из потока.
Это позволяет нам поместить в элементы-области заглушки или резервный контент.
<div></div> <div></div> <div></div> <div>…</div>
При использовании областей распределяемый контент не является дочерним по
отношению к элементам-областям — мы всего лишь меняем место отображения
контента.
С точки зрения DOM всё остаётся в исходном состоянии, поэтому контент не
наследует стили от области, в которую он помещён. Вместо этого в спецификации
определён псевдоселектор ::region()
.myRegion::region(p){
/*стили для абзацев(p), которые распределяются между областями*/
}
Использование областей в отзывчивом дизайне
Отзывчивый дизайн — это техника создания гибкой раскладки, которая
изменяется в зависимости от контекста.
Чтобы сделать элементы
гибкими и адаптировать вёрстку для экранов разных размеров разработчики часто
используют процентные значения и медиазапросы. Отзывчивый дизайн приспосабливает
контент для любого экрана не требуя перестраивать дизайн или код.
Области упрощают создание отзывчивого дизайна. Чтобы убедиться, что
контент поместится в свой контейнер, нам больше не нужно полагаться на height: auto, прописанный для каждого элемента. Вместо этого мы можем
разрешить контенту распределяться между несколькими элементами раскладки. Это
означает, что контент не диктует какой должна быть вёрстка, а скорее
подстраивается под задуманный дизайн. Для последней области можно использовать height: auto, чтобы быть уверенными что она расширится, чтобы вместить
весь оставшийся контент. Использование этого приёма можно увидеть в примере с
CodePen, размещённом ниже:
Области и события
Для управления вёрсткой и обеспечения корректного отображения контента можно
использовать JavaScript-события для областей.
В спецификации областей описаны
события, которые можно использовать при определённых состояниях. Событие regionoversetchange запускается когда для какой-либо области меняется
свойство regionOverset: это может случиться когда пользователь изменяет
размеры страницы, растягивая элемент-контейнер таким образом, что контент больше
не заполняет некоторые области. regionOverset может принимать значения fit, overset или empty. Значение empty указывает, что внутри области нет
контента. Свойство regionOverset принимает значение overset когда последняя
область в цепочке не может вместить весь оставшийся контент, при этом часть
контента становится недоступна.
Значение fit указывает на то, что контент заполнил область должным образом:
полностью (если это одна из областей в середине цепочки) или частично (если это
последняя область в цепочке). Результат срабатывания этих событий зависит от
дизайна, контента и других аспектов вёрстки.
Их можно использовать чтобы
динамически добавлять и удалять области, или чтобы применить класс, изменяющий
расположение элементов. Ниже можно увидеть пример с CodePen.
Примечание: в некоторых реализациях вместо события regionoversetchange вызывается regionlayoutupdate согласно предыдущей версии спецификации.
Области и медиазапросы
Области задаются исключительно в CSS, что делает очень простым их использование
в сочетании с медиазапросами. Кроме изменения размеров и
позиционирования элементов, можно также определять какие элементы будут
использоваться в качестве областей. Также можно присвоить для области display: none, и она будет полностью исключена из цепочки.
Благодаря этой возможности отдельные области можно легко скрыть со страницы не
беспокоясь о целостности контента. Этот приём также можно использовать для
отображения абсолютно разных макетов без необходимости измененять контент.
Области и свойства разрывов
CSS-области позаимствовали свойства разрывов из спецификации по многоколоночной
вёрстке (multi-column layout specification), их можно использовать для контроля
разбивки контента по областям.
Эти свойства можно применить для элементов в
потоке, чтобы указать, что внутри них должен быть разрыв или же наоборот —
чтобы его избежать. Использование значения region для break-before или break-after приведёт к принудительному разрыву перед или после
соответствующего элемента. Значение avoid-region может быть использовано для break-before, break-after и break-inside чтобы избежать разрывов перед,
после или внутри элемента.
Это может пригодиться если возникнет необходимость сгруппировать
взаимосвязанные элементы и предотвратить разделение важных элементов. В демо
ниже представлен поток изображений в правой колонке и поток длинного текста в
левой. Если уменьшить ширину окна браузера, медиазапросы изменят разбивку
страницы, перераспределяя изображения в более узкую одноколоночную структуру.
Применение break-after: region для контейнеров с изображениями обеспечивает
разрыв после каждого изображения в потоке.
Примечание: В некоторых реализациях используются не предусмотренные
стандартами свойства разрывов с префиксом region; например, region-break-before или — с вендорным префиксом — -webkit-region-break-before.
Для областей с помощью медиазапросов применяется свойство break-after.
Области и единицы области просмотра
Единицы области просмотра позволяют использовать окно (или область просмотра) как основу для изменения размеров элементов, что добавляет в раскладку постоянство в соотношении сторон и гармонию. Мы получаем возможность моделировать страницы или блоки, в которых контент разбивается на связанные группы. Подводным камнем этого подхода может стать то, что, если вы используете соотношение сторон устройства для определения размеров контейнеров (и ширины, и высоты), контент может перестать в них помещаться.
Однако можно использовать области для разбивки контента, сохраняя при этом
переменный размер элементов при разных размерах экрана.
Применение этого приёма
можно увидеть в «Демо для слонов-сирот на National Geographic». На этой
странице изображения и текст изменяются таким образом, чтобы сохранять высоту
области просмотра. Области использованы для распределения потока контента по
всем текстовым блокам, и они подстраиваются, когда пользователь уменьшает окно
браузера.
Использование областей с относительными единицами. Обратите внимание как точно изображение заполняет окно. (Крупнее)
На планшетах для навигации по журналам и книгам часто используется разбивка на страницы, т.е. пользователь получает возможность перелистывать страницы с контентом используя свайп или тап. Как разработчики, мы хотим сделать эти страницы отзывчивыми к различным размерам экрана. Области отлично подходят для такой раскладки, так как они позволяют задавать размер колонок в относительных единицах и создавать различные раскладки, в которых контент может распределяться между колонками. Пример того, как это можно сделать в HTML показан на видео ниже:
youtube.com/embed/zKjoZvRCyh0″ allowfullscreen=»» frameborder=»0″/>На вебсайте Kindle Cloud Reader можно увидеть похожий двухстраничный разворот, однако здесь для управления вёрсткой используется JavaScript. Реализация такой вёрстки с помощью JavaScript очень затратна с точки зрения усилий со стороны разработчиков, к тому же настолько неэкономичный подход к управлению DOM обычно ведёт к снижению производительности. Мы можем использовать области, чтобы сделать то же самое с помощью существующих возможностей браузера, тем самым повышая производительность сайта и уменьшая время на разработку.
Отладка
Для работы с областями будет полезно иметь инструменты для управления
и отладки. В панели инструментов разработчика в Chrome можно
включить инструменты отладки областей. Подробные инструкции по включению
этих инструментов можно найти в статье Кристиана Кантрелла (Christian
Cantrell) «Поддержка CSS-областей в Веб-инспекторе». С помощью этих
инструментов вы сможете увидеть все именованные потоки в документе,
найти контент и цепочку областей, привязанных к каждому проименованному
потоку, и получить визуальные подсказки о том, помещается ли контент в область,
основываясь на значении свойства regionOverset.
В Webkit Nightly также есть полезные визуальные подсказки: если открыть Веб-инспектор и просмотреть код для контейнера области, можно увидеть номер области и соединения между контейнерами областей, демонстрирующие поток контента.
В Webkit Nightly есть возможность просматривать код контейнеров областей, их порядок и цепочку областей
Материалы для дальнейшего чтения
Области открывают множество возможностей для разработки отзывчивого дизайна и
дают уверенность, что контент будет отлично выглядеть на экранах любого
размера. Один из отзывчивых сайтов, уникальная раскладка которого была создана
с помощью областей — демо для компании по производству велосипедов от
Adobe, созданная с использованием Edge Reflow. Подпишитесь на @adobeweb
чтобы следить за последними новостями по областям и другим новинкам.
Также рекомендуем просмотреть подборку от Adobe на CodePen, в которой
продемонстрировано использование областей на практике; возможно, у вас возникнет
желание скопировать код одного-двух примеров чтобы изучить различные варианты
использования областей.
Больше информации по областям можно найти в блоге команды веб платформы от Adobe, в котором часто публикуются новости о спецификациях и их реализации. Полную информацию можно найти в Спецификации для CSS-областей, в которой описаны все вопросы, рассмотренные в этой статье, а также многие другие. Также дополнительную информацию можно найти в разделе «Области» на сайте Adobe.
Отзывчивый пользовательский интерфейс — Макет — Дизайн материалов
Контрольные точки Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
Для оптимального взаимодействия с пользователем пользовательские интерфейсы в материальном дизайне должны адаптировать макеты для следующих значений ширины контрольной точки: 480, 600, 840, 960, 1280, 1440 и 1600 dp.
Предварительный просмотр контрольных точек Material Design с помощью этого интерактивного средства просмотра на настольных компьютерах, мобильных устройствах и планшетах
1. Сводка и подробный просмотр содержимого в макетах
- Макеты шириной менее 600 dp могут заполнять экран одним уровнем иерархии содержимого (либо сводка, либо подробное содержимое, но не оба)
- Макеты шириной более 600 dp могут разместить на экране два уровня иерархии содержимого (обобщенное и подробное содержимое)
2. Максимальная ширина экрана
Макеты шириной более 1600 dp могут позволить макету увеличиваться до тех пор, пока он не достигнет максимальной ширины. В этот момент сетка может выполнить одно из следующих действий:
- Выровнять по центру с увеличенными полями
- Оставаться выровненным по левому краю, пока растет правое поле
- Продолжать увеличиваться при отображении дополнительного содержимого
Система точек останова
экраны, устройства, и ориентации.
Для некоторых измерений значения остаются неизменными даже при повороте устройства. По этой причине наименьшая ширина в любой ориентации является определяющим значением.
* 16 dp, когда наименьшая ширина устройства <600
** Точки останова рабочего стола на 16 dp ниже указанных значений, чтобы учесть различия в Chrome браузера.
Точка останова (dp) | Телефон/Планшет Портрет | Телефон/Планшет Пейзаж | 9 0004 Окно | Колонны | Желоб |
0 | маленькая трубка | xмаленький | 4 | 16 | |
360 | средняя трубка | xsmall | 4 | 16 | |
400 | большая трубка | маленький | 4 | 16 | |
480 | большая трубка | маленькая трубка 9 0052 | xмаленький | 4 | 16 |
600 900 52 | маленький планшет | средняя трубка | маленькая | 8 | 16/24* |
720 | большой планшет | большой телефон | маленький | 8 90 052 | 16/24* |
840 | большой планшет | большой трубка | маленькая | 12 | 16/24* |
960 | маленький планшет | маленький | 12 | 24 | |
1024** 9 0005 | большой планшет | средний | 12 | 24 | 1280** | большой планшет | средний | 12 | 24 |
1440** | большой | 12 | 24 | ||
1600** | большой | 12 | 24 | ||
1920** | большой | 12 | 24 |
Сетка Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
Адаптивный пользовательский интерфейс Material Design основан на сетке из 12 столбцов. Эта сетка создает визуальную согласованность между макетами, обеспечивая при этом гибкость для самых разных дизайнов. Количество столбцов сетки зависит от системы точек останова.
Эта анимация показывает, как поверхности и панели могут выравниваться, чтобы влиять на сетку из 12 столбцов.
Поля и промежутки
Адаптивная сетка ориентирована на постоянную ширину полей и промежутков, а не на ширину столбца. Поля и столбцы в материальном дизайне следуют квадратной базовой сетке размером 8 dp. Поля и промежутки могут быть шириной 8, 16, 24 или 40 dp.
Поля и промежутки могут не совпадать. Например, в одном и том же макете допустимо использовать поля 40 dp и отступы 24 dp.
Эта анимация показывает взаимодействие следующих вариантов ширины полей и переплетов:
- Поля и промежутки 8 dp
- Поля и промежутки 16 dp
- Поля и промежутки 24 dp
- Поля и промежутки 40 dp 9 0015 Поля 40dp и промежутки 24dp
Полный -width vs Centered
Полноразмерные сетки используют плавающие столбцы и контрольные точки, чтобы определить, когда макет необходимо изменить.
Центрированные сетки использовать фиксированные столбцы и переформатировать макет, когда все столбцы (плюс определенное поле) больше не помещаются на экране.
- Полноразмерные сетки
- Центрированные сетки
Влияние панели на сетку
Как определено в шаблонах навигации, боковая навигация может быть постоянной, постоянной или временной. Это поведение применимо к любой панели, а не только к боковой панели навигации.
Постоянная
Постоянная панель существует вне адаптивной сетки. Панель появляется в определенной точке останова (когда экран может вместить панель) и сжимает содержимое. Нет элементов управления для отображения/скрытия панели.
Эффекты постоянной панели на отзывчивой сетке
Эффекты боковой панели на сетке
Эта анимация происходит в два этапа:
- Появляется постоянная боковая панель, сжимающая и содержимое, и сетку.
Контент доступен, пока панель остается видимой. Панель скрывается при переключении. - Появляется временная боковая панель, выводящая содержимое сетки за пределы экрана. Прикосновение либо за пределами панели, либо к элементу внутри панели скрывает панель.
Контент доступен, пока панель остается видимой. Панель скрывается при переключении.Влияние постоянной панели на адаптивную сетку
Временное наложение
Временная панель не влияет на сетку или содержимое, когда она находится вне экрана. При переключении, чтобы быть видимым, его можно снова скрыть, коснувшись любого места за пределами панели или элемента внутри панели.
Эффекты временной панели на адаптивной сетке
Поведение поверхности Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
При изменении размера экрана пользовательский интерфейс адаптируется с использованием следующих свойств поверхности.
Видимость
Поведение | Определение |
Постоянно 9000 5 | При наличии свободного места на экране поверхность всегда видна. |
Постоянный | Видимость поверхности можно переключать между видимой и скрытой. При видимости взаимодействие с другими элементами на экране не влияет на видимость. |
Временный | Видимость поверхности можно переключать между видимой и скрытой. При отображении взаимодействие с другими элементами на экране переключает поверхность, чтобы она становилась скрытой или свернутой. |
Ширина
Поведение | Определение |
Фиксированный | Ширина элемента остается неизменной при изменении размера экрана. |
Fluid | Ширина элемента увеличивается по мере изменения размера экрана. |
Sticky | Ширина элемента фиксирована до тех пор, пока на нее не повлияет другой элемент или точка останова. |
Сжатие | Ширина элемента уменьшается по мере раскрытия панели |
Толкание | Ширина элемента остается прежней, его положение меняется по горизонтали при появлении панели, и он может быть частично закрывается краем экрана. |
Наложение | Ширина и положение элемента остаются неизменными, когда панель отображается поверх содержимого. |
Дескрипторы
Поведение | Определение |
Сверху, снизу | Позиция элемента по оси Y. |
Больше, меньше | Позиция z элемента в движении. |
Спереди, сзади | Статическое положение элемента по оси z. |
Слева, справа, по центру | Положение x элемента |
Сверху, снизу 90 052 | Положение элемента по оси y и его положение относительно края экрана. |
Плоский, приподнятый | Положение по оси Z и тень элемента. Плоский элемент не будет иметь тени. |
Вставка, без полей | Отступы изображения или элемента |
Сводка, детали 90 052 | Краткое содержание и полное раскрытие резюме |
Узоры Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.
По мере увеличения пространства на экране могут применяться следующие адаптивные шаблоны:
- Показать
- Преобразовать
- Разделить
- Перекомпоновать
- Расширить
- Позиция
Отображение
Пользовательский интерфейс, скрытый маленькими экранами, может быть обнаружен при увеличении доступное пространство.
Элементы, такие как боковая навигация, могут стать видимыми.
Простой пользовательский интерфейс может отображать более мощные или сложные параметры.
Содержимое на маленьком экране, которое появляется только после касания элемента, может отображаться по умолчанию, когда доступно больше места.
Преобразование
Элемент пользовательского интерфейса может преобразовываться из одного формата в другой.
Боковая навигация может трансформироваться во вкладки.
Список может трансформироваться в список сетки.
Элементы меню могут трансформироваться в значки на панели инструментов.
Разделить
Многоуровневый пользовательский интерфейс может быть разделен на вновь доступное пространство.
Боковая навигация, содержимое списка и подробное содержимое разделены для заполнения единого представления.
Левая панель, содержимое списка и правая панель разделяются в одном представлении по мере увеличения пространства.
Содержимое родственного элемента с вкладками разделено в одном и том же представлении.
Перекомпоновка
Пользовательский интерфейс может перекомпоновываться в доступное пространство.
Элементы формата с одним столбцом могут перекомпоновываться для заполнения области содержимого в различных комбинациях.
Горизонтальные вкладки могут перекомпоновываться в вертикальный список.
Элементы могут перекомпоновываться внутри компонента в зависимости от нового соотношения сторон экрана или ориентации устройства.
Расширить
Пользовательский интерфейс может расшириться на большее пространство.
Карточки содержимого могут расширяться, чтобы заполнить новое пространство.
Диалоги могут расширяться пропорционально содержимому или с определенным приращением.
Положение
Положение компонентов пользовательского интерфейса может быть изменено на более подходящее.
Нижний лист на маленьком экране может трансформироваться в меню.
Плавающая кнопка действия (FAB) может перемещаться в более заметное место по сравнению с другими элементами пользовательского интерфейса.
Адаптивный дизайн — Tailwind CSS
Обзор
Каждый служебный класс в Tailwind можно применять условно в разных точках останова, что упрощает создание сложных адаптивных интерфейсов, не выходя из HTML-кода.
По умолчанию существует пять точек останова, основанных на распространенных разрешениях устройств:
| Префикс точки останова | Минимальная ширина | CSS |
|---|---|---|
| 640px | @media (min-width : 640px) { . | |
md | 768px | @media (min-width: 768px) { ... } |
LG | 1024px | @media (min-width: 1024px) { ... } |
xl | 1280px | @media (min- ширина: 1280 пикселей) { ... } |
2xl | 1536px | @media (min-width: 1536px) { ... } |
.. } Чтобы добавить утилиту, но чтобы она вступала в силу только в определенный перерыв точка, все, что вам нужно сделать, это префикс утилиты с именем точки останова, за которым следует : символ:
Это работает для каждого служебного класса в фреймворке , что означает, что вы можете изменить буквально что угодно в заданной точке останова — даже такие вещи, как расстояние между буквами или стили курсора.
Вот простой пример компонента маркетинговой страницы, в котором на маленьких экранах используется стековый макет, а на больших экранах — параллельный макет (измените размер браузера, чтобы увидеть его в действии) :
<дел> <дел><дел>Отпуск компанииНевероятные условия для вашей командыХотите взять свою команду на уединение, чтобы насладиться вкусной едой и позагорать? У нас есть список мест, где можно это сделать.
Технически мы могли бы просто использовать 
д.
.. } 