вступление
Адаптивный дизайн кажется, что при изучении кода, независимо от фреймворка, языка или проекта, всегда есть что-то, что обсуждает адаптивный дизайн. Что именно это значит? Всезнающий сайт Википедия определяет это как:
«Подход к веб-дизайну, при котором веб-страницы хорошо отображаются на различных устройствах и размерах окон или экранов от минимального до максимального».
Таким образом, в наших проектах мы стремимся создать адаптивные пользовательские интерфейсы, независимо от того, какое устройство пользователь выберет для использования. Обычно с ванильным CSS мы используем медиа-запросы и устанавливаем правильный стиль для каждой точки останова. Это может быть утомительно и утомительно, если делать это с нуля, но с попутным ветром это очень просто. Tailwind делает это очень просто за счет использования адаптивных вариантов утилит.
Варианты коммунальных услуг
Но что именно это означает? Tailwind - это CSS-фреймворк в первую очередь утилит, который означает создание сложных компонентов из ограниченного набора примитивных утилит. Ниже вы найдете рисунки 1.1 и 1.2, на которых показаны примеры двух подходов к написанию CSS. И то, и другое можно найти в документации по попутному ветру.
Рисунок 1.1.
На рисунке 1.1 много всего происходит просто для того, чтобы сделать простое окно предупреждений. Это не ужасно, но вы можете представить, как растет ваш проект, так же как и ваш код. Теперь вам нужно позаботиться о создании новых имен классов, запомнить, какие имена классов вы использовали, а затем, помимо всего прочего, вы должны сделать каждый элемент адаптивным для нескольких размеров экрана. Теперь мы посмотрим на рисунок 1.2 и увидим нечто совершенно иное.
Рисунок 1.2.
Рисунок 1.2 показывает, сколько всего мы можем очистить. Больше не нужно придумывать сложные имена классов или писать несколько строк кода для каждого элемента, при этом реализуя полностью настраиваемый дизайн компонента. Еще одно преимущество, которое было для меня огромным, заключалось в том, что внесение изменений казалось намного безопаснее. Когда вы работаете с глобальным CSS, возможно, вы никогда не узнаете, что вы нарушаете, внося изменения. Поскольку классы HTML являются локальными, это означает, что вы настраиваете правила стилизации специально для этого элемента и ничего больше. Это очень помогает с классами контейнеров. Когда я впервые начал изучать css, выясняя правила, иерархии и специфичность, мне потребовались бы часы. Не то чтобы эти вещи не важны, но действительно ли мы хотим тратить свое драгоценное время на борьбу с CSS Flexbox в модальном окне регистрации? Я думаю, что наше время можно было бы лучше провести в другом месте.
Контрольные точки
Если использование утилит помогает упростить создание стиля, настройка нашего адаптивного дизайна также проста. Есть 5 префиксов точки останова, которые мы должны знать, если хотим воспользоваться вариантами вспомогательной утилиты, отвечающей за реагирование на попутный ветер. Вот эти 5:
Рисунок 1.3.
При добавлении служебной программы точки останова все, что вам нужно, это добавить имя точки останова, за которым следует двоеточие (:), а затем добавить служебную программу, которую вы хотели бы переопределить, когда размер экрана достигнет минимальной точки останова. Ниже приведен пример:
Разве это не выглядит намного проще, чем 80 строк кода для изменения определенного элемента для определенного размера экрана? Как указывалось ранее, использование одного примера для одного элемента может показаться не таким уж большим, но когда вы работаете над большими проектами, где будет несколько изменений для нескольких разных размеров экрана, этот метод стилизации потенциально экономит вам часы в зависимости от размера проекта.
Сначала мобильные
Tailwind использует систему мобильной первой точки останова, что означает, что служебные программы без префикса действуют на всех размерах экрана, а служебные программы с префиксом (те, которые используют «sm» или больше) действуют только при указанной точке останова и выше. Из-за того, как потребители используют Интернет, независимо от того, что вам, вероятно, следует использовать в первую очередь для мобильных устройств при создании приложений.
Поэтому, когда вы пишете код, убедитесь, что вы используете этот метод:
Забей это себе в голову. Используйте служебные программы без префиксов для таргетинга на мобильные устройства и переопределите их при больших точках останова.
В качестве примера, который вы можете увидеть и поиграть, воспользуйтесь моим веб-приложением pokedex (все еще работающим), настройте размер экрана и посмотрите, как меняется макет.
Чтобы узнать больше об адаптивном дизайне попутного ветра или просто узнать больше о самом попутном ветре, прочтите документацию здесь.
Первоначально опубликовано на http://datboibecoding.com.
