Incluso si estás empezando con CSS, probablemente ya has utilizado las propiedades width y height.
Pero te habrás dado cuenta de que esas propiedades pueden poner restricciones innecesarias a los elementos de la página. Por lo que no estaría de más poder beneficiarnos y conocer las propiedades relacionadas al uso de los prefijos “min” y “max”.
min-width / min-height
Las propiedades min-width y min-height aceptan valores unitarios de la misma manera que las propiedades de height y width, así que no hay diferencia en la sintaxis. Se puede utilizar cualquier unidad aceptable, incluyendo píxeles, ems y porcentajes.
Estas propiedades se usa para decirle al navegador que represente un elemento con un tamaño “mínimo”.
1 | .element { |
2 | min-height: 200px; |
3 | min-width: 200px; |
4 | } |
Un elemento de bloque con las anteriores CSS tendría, por lo menos, unas dimensiones de 200 × 200 píxeles, incluso si el elemento estaba vacío. Sin embargo, ya que los elementos de bloque, por defecto, tienden a expandirse y adaptarse al espacio disponible, sólo el valor de min-height no tendría ningún efecto en muchos casos.
Con el siguiente ejemplo, pulsa en los botones “HTML” y “Output” hasta que veas en el código embed las dos pantallas el ejemplo que voy a comentar.
Para ver los efectos de min-width, agregamos un float al elemento. Al hacer esto el elemento se convierte en tipo inline en vez de block y ya no tiende a ocupar todo el espacio disponible. Si quitamos el float, el elemento ocupa todo el ancho disponible por lo que el min-width en este caso no nos haría falta.
También hay que decir que éstas propiedades no son soportadas en IE 7 y 6, como de costumbre, y hay que aplicar un hack. Es un hack un poco viejo y no muy sofisticado pero es lo que hay.
1 | div { min-width:100px; zoom:1; *width:100px; max-height:200px; zoom:1; *height:200px;} |
max-width / max-height
Al igual que las propiedades de “min”, max-width y max-height aceptan los valores unitarios. Pero esta vez, en lugar de un tamaño mínimo de un elemento, estas propiedades establecer el tamaño máximo. Aquí hay otro ejemplo simple:
1 | .element { |
2 | width: 15%; |
3 | height: 15%; |
4 | max-height: 200px; |
5 | max-width: 200px; |
6 | } |
Ten en cuenta que esta vez he especificado valores de porcentaje para la ancho y la alto, pero me he limitado el ancho y alto a unos valores de 200px. El “15%” de ancho se calcula basándose en el tamaño del elemento padre (es decir, 15% del padre). Pero incluso si el elemento primario es 5000px de ancho, el div .element no recibirá más ancho que 200 píxeles, que es el ancho máximo que hemos fijado.
Usos relevantes de min/max width y height en CSS
Es muy aconsejable el uso de éstas propiedades cuando quieres hacer un diseño “responsive” y que se adapte a los dispositivos móviles. min/max width y height junto con los media queries deCSS3 es la combinación perfecta para evitar que tenemos elementos excesivamente grandes y que no se puedan ver en móviles.
