Властивості CSS: пояснення max-width, min-width, max-height та min-height з прикладами

Оригінальна публікація: CSS Properties – Max-width, Min-width, Max-height, and Min-height Explained with Examples

Якщо ви створюєте вебсайт, важливо зробити його адаптивним.

Деколи важко зробити так, щоб вебсайт мав хороший вигляд на екранах різного розміру. Вам доведеться керувати шириною або висотою елементів, а також вказувати різні розміри за допомогою медіазапитів, що не завжди просто.

Хоча відносні одиниці (наприклад, відсотки) можуть бути корисними в деяких випадках, вони можуть призвести до проблем.

Але не хвилюйтесь: такі властивості, як max-width та min-width, прийдуть вам на допомогу. Ці властивості дозволяють уникнути використання медіазапитів для деяких адаптивних завдань.

У цій статті ви дізнаєтеся, що таке 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 дозволить елементу продовжувати збільшуватися в ширину, поки він не досягне вказаного значення.

Ось приклад:

Зверніть увагу, що розмір картки ніколи не перевищує 350px. Так працює max-width. Це дозволяє картці рости на менших екранах.

Якщо ширина менша за 350px, вона займає 80% від поточного розміру екрана. Але як тільки ширина досягає 350px, вона фіксується і не перевищує встановлену ширину.

Ось так виглядає код:

//Картка не може бути більшою за 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: ви можете встановити мінімальну ширину, щоб картка не була меншою за вказане значення.

//Картка не може бути меншою за 250px

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  //тут налаштовуємо властивість min-width
  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, але впливає на висоту, а не ширину.

Ось приклад:

//Встановлює висоту елемента до вказаної одиниці, ефективно зупиняючи його збільшення у висоті

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:70%;
  //тут налаштовуємо властивість max-height
  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 задає мінімальну висоту для елемента.

Це трапляється, коли вікно перегляду зменшується, а висота елемента не може бути меншою певної висоти.

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

Висновок

Адаптивність є важливим фактором у веброзробці. Відстежувати вигляд елементів на екранах різних розмірів може бути складно, але властивості max-width, min-width, max-height і min-height допомагають з цим.

Ці властивості дозволяють регулювати розмір елементів без необхідності використання медіазапитів.