CSS-свойства max-width, min-width, max-height и min-height: разбираем на примерах

Перевод статьи «CSS Properties – Max-width, Min-width, Max-height, and Min-height Explained with Examples».

При создании сайта одна из самых важных задач — сделать его отзывчивым. То есть сайт должен хорошо выглядеть на экранах разных размеров. Для этого вам нужно управлять шириной и высотой элементов. А делать это при помощи медиа-запросов может быть непростой задачей.

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

Помогут вам CSS-свойства max-width, min-width, max-height и min-height. Они позволяют решать некоторые задачи изменения размеров элементов без использования медиа-запросов.

Свойство max-width

С помощью свойства max-width можно установить максимальную ширину элемента. Это означает, что элемент может наращивать ширину, пок ане достигнет установленного предела (предел может быть как в абсолютных, так и в относительных единицах). Достигнув указанного ограничения, ширина фиксируется.

Рассмотрим пример. Представьте, что мы устанавливаем ширину элемента в 80% от зоны просмотра. Если зона просмотра — 375px, наш элемент будет иметь ширину 300px. При такой ширине качество не потеряется.

(80/100) * 375 = 300px

Но если зона просмотра у нас существенно больше, скажем, 1300px, ширина элемента станет 1040px.

(80/100) * 1300 = 1040px

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

Пример:

See the Pen max-width-example by King nelson (@D_kingnelson) on CodePen.

Обратите внимание: размер карточки ни при каких условиях не превышает 350px. Так работает свойство max-width. Благодаря ему можно обеспечить увеличение размера карточки на маленьких экранах.

Если ширина экрана меньше 350px, карточка займет 80% от имеющейся ширины. Но если достигнута планка в 350px, ширина перестает увеличиваться.

Вот как выглядит код:

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

Свойство min-width

В противоположность свойству max-width, свойство min-width определяет минимальную ширину элемента.

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

Здесь вам поможет свойство min-width. С его помощью вы можете установить минимальный размер, до которого может уменьшиться элемент. Это важно, например, для кнопок.

See the Pen min-width-example by King nelson (@D_kingnelson) on CodePen.

Здесь элемент карточки не может стать меньше, чем 250px в ширину.

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  //here we set the min-width property
  min-width : 250px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

Свойство max-height

Свойство max-height работает аналогично свойству max-width, но регулирует не ширину, а высоту элемента.

Пример:

See the Pen max-height-example by King nelson (@D_kingnelson) on CodePen.

Здесь высота элемента фиксируется при достижении определенной высоты.

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:70%;
  //here we set the max-height for the card.
  max-height: 400px;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

Свойство min-height

В противоположность max-height, свойство min-height позволяет установить минимальную высоту элемента.

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

See the Pen min-height by King nelson (@D_kingnelson) on CodePen.

.element{
    height:40vh;
    min-height:200px;
}

Заключение

Отзывчивость — важный фактор в веб-разработке. Отслеживать все варианты изменения размеров элементов в зависимости от размеров экранов может быть сложной задачей, но CSS-свойства max-width, min-width, max-height и min-height помогут вам ее решить. С их помощью можно установить граничные размеры элементов и обойтись без медиа-запросов.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]