Как создавать адаптивные кнопки и блоки в CSS
Руководство

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

  • правка дополнительного содержимого не затрагивала ранее написанные стили;
  • при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

.button {

   /* геометрия элемента */

   width: 150px;

   height: 20px;

   /* отступы между кнопками */

   margin-bottom: 5px;

   /* центрируем текст кнопки по вертикали */

   display: flex;

   justify-content: center;

   /* центрируем текст кнопки по горизонтали */

   text-align: center;

   /* чтобы работала геометрия и отступы у тега <a> */

   display: inline-block;

   /* убираем обводку у тега <a> */

   text-decoration: none;

   background-color: red;

   color: #fff;

}

Примеры использования:

<a href=»#» class=»button»>Отправить резюме</a> 

<a href=»/» class=»button»>Очистить форму</a>

Как создавать адаптивные кнопки и блоки в CSS

Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:

Как создавать адаптивные кнопки и блоки в CSS

Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {

   min-width: 150px;

   /* при жесткой высоте будет увеличиваться ширина */

   height: 20px;

   /* … остальной код без изменения */

}

Как создавать адаптивные кнопки и блоки в CSS

Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button {

   /*

      поскольку другое значение border-box не задавалось,

      нужно подкорректировать размеры

    */

   min-width: 140px;

   /* при жесткой высоте будет увеличиваться ширина */

   height: 20px;

   padding: 0 10px;

   /* … остальной код без изменения */

}

Как создавать адаптивные кнопки и блоки в CSS

Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Как создавать адаптивные кнопки и блоки в CSS

Лучше всего оформить это в CSS так:

<div class=»greeting»>

 <h1 class=»greeting__title»>

   Поздравляю, вы стали обладателем квартиры в Сызрани!

 </h1>

</div>

.greeting {

 /* задаём геометрию */

 height: 200px;

 padding: 20px;

 /* центрируем содержимое по вертикали и горизонтали */

 display: flex;

 align-items: center;

 justify-content: center;

 /* учитываем последующее добавление элементов */

 flex-direction: column;

 background: blue;

}

.greeting__title {

 color: #fff;

 font-family: Arial;

 font-size: 20px;

}

Вот что у нас получилось:

Как создавать адаптивные кнопки и блоки в CSS

Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Как создавать адаптивные кнопки и блоки в CSS

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {

 /* задаём геометрию */

 min-height: 200px;

 padding: 20px;

 /* код без изменения */

}

Код примера

padding > min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting {

 /* задаём геометрию */

 min-height: 40px;

 /* тут речь идет только о box-sizing:content-box */

 padding: 80px;

 /* код без изменения */

}

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

Как создавать адаптивные кнопки и блоки в CSS

Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

<div class=»greeting»>

 <div class=»greeting__container»>

   <h1 class=»greeting__title»>

     Поздравляю, вы стали обладателем квартиры в Сызрани!

   </h1>

 </div>

</div>

И так тоже не делайте:

.greeting {

 /* задаём геометрию */

 min-height: 40px;

 /* не задаём никакие отступы в родительском элементе */

 /* код без изменения */

}

.greeting__container {

 margin: 80px;

}

Резюме

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

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читать еще: «10 ошибок начинающего верстальщика и как их избежать»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Как создавать адаптивные кнопки и блоки в CSS