Usar Min/Max Width y Height en CSS

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”.

.element {
    min-height: 200px;
    min-width: 200px;
}

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.

JS Bin

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.

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:

.element {
    width: 15%;
    height: 15%;
    max-height: 200px;
    max-width: 200px;
}

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 de CSS3 es la combinación perfecta para evitar que tenemos elementos excesivamente grandes y que no se puedan ver en móviles.

Related posts:

1. Uso básico CSS3 Media Queries para crear versiones web para móvil Con las reglas @media de CSS3 conseguimos mejorar la experiencia...


2. Selectores de CSS 3 CSS 3 incluye todos los selectores de CSS 2.1 y...


3. Cambiar el nombre de una clase css con javascript y con jquery Hoy he aprendido una cosita bastante sencilla pero muy util...


4. Como usar los DNS publicos de Google para navegar mejor. Te va lento internet? Se te corta? o estas en...


5. usar htc como modem He encontrado una aplicación para el HTC Magic, bueno en...

via Pedro Ventura | Programación Web PHP, Tutoriales y Manuales de Cakephp, Sistemas linux, mejoras SEO, Wordpress, Proyectos personales y freelance http://www.pedroventura.com/desarrollo-web/usar-minmax-width-y-height-en-css/