Свойство min-width

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

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

Синтаксис

cssселектор {
  max-width: значение;
}

Пример

В данном примере ширина составляет процент от ширины родителя. Уменьшите окно браузера по ширине, и контейнер тоже уменьшится, чтобы подстроиться под ширину окна браузера. Однако он будет уменьшаться только до величины, определенной в min-width, это 400px. Как только контейнер достигнет этой ширины - он перестанет уменьшаться:

html<div id="elem"></div>

css#elem {
  width: 70%;
  min-width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Пример

В данном примере ширина контейнера ограничена с обоих сторон: он не сможет стать больше 900px и меньше 400px:

html<div id="elem"></div>

css#elem {
  width: 70%;
  min-width: 400px;
  max-width: 900px;
  height: 100px;
  border: 1px solid black;
}

Результат:

Смотрите также