Propriedade min-width

A propriedade min-width define a largura mínima de um elemento. Os valores para a propriedade podem ser quaisquer unidades de medida ou a palavra-chave none, que significa a ausência de um valor.

Geralmente é definida para um elemento com largura fluida (a largura é definida em porcentagem ou não é definida, e o elemento se expande em largura devido ao seu conteúdo). Se a largura do elemento for definida em porcentagem - ao reduzir a janela do navegador, ela diminuirá até atingir o valor de min-width.

Sintaxe

cssseletor {
  max-width: valor;
}

Exemplo

Neste exemplo, a largura é uma porcentagem da largura do elemento pai. Reduza a largura da janela do navegador, e o contêiner também diminuirá para se adaptar à largura da janela do navegador. No entanto, ele diminuirá apenas até o valor definido em min-width, que é 400px. Quando o contêiner atingir essa largura - ele parará de diminuir:

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

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

Результат:

Exemplo

Neste exemplo, a largura do contêiner é limitada em ambos os lados: ele não poderá ficar maior que 900px e menor que 400px:

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

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

Результат:

Veja também