¿En qué se diferencian width, max-width y min-width?

Muchas veces cuando se está aplicando CSS, te topas con estas 3 propiedades parecidas, width, max-width y min-width. ¿Alguna vez te confundiste en usar alguna de estas pero en verdad debisteno usar unel max-width o un min-width? Pues, a todos nos ha pasado, seguramente. En este post te explicaré qué hace cada propiedad y en qué se diferencian con las demás. Pues, comencemos.
 

Sobre width

El más simple de los tres. Esta propiedad es la que define un ancho específico a un elemento. Sin esta, el elemento o bloque, si es que no tiene texto o algún contenido dentro, no podría ser visualizado por el usuario.

En términos del modelo de caja de CSS. El width vendría a definir al contenido del elemento. Lo que vendŕia a ser el Content en la imagen. Sin embargo, cuando se coloca a un elemento la propiedad box-sizing y se ponga como valor border-box, el width vendría a definir el Content, Padding y el Border.

Por el lado del Responsive Design, esta propiedad no puede adaptarse por sí mismo a los diferentes tamaños de otros dispositivos o si la pantalla hace un cambio de tamaño. Para esto, necesita respaldarse de otras propiedades.

Como se ve en el vídeo de abajo, un elemento no puede adaptarse al ancho de la pantalla con tan solo la propiedad width, para esto veremos las otras dos propiedades que si pueden manejar esto.

Sobre max-width

Según en la página de MDN, esta propiedad se define como:

La propiedad de CSS max-width coloca el máximo ancho a un elemento. Además, impide que el valor de width sea más largo que el valor especificado en max-width .

Esto quiere decir que cuando el valor que nosotros especifiquemos en width sea mayor que max-width, este último sobrescribirá el ancho del elemento al valor que tiene max-width. Así max-width define el ancho máximo que un elemento puede tener.

Tal como se ve en el vídeo/gif de la parte inferior, max-width cambia el tamaño del elemento si el valor de width es mayor que el de max-width. Sin embargo, si el width es menor entonces max-width no tendría que actualizar el tamaño ya que no se alcanzado el tamaño máximo del elemento.

Por el lado del Responsive Design, max-width es aplicado en los media queries. Si no sabes qué son los media queries, te sugiero leer este post. Entonces, max-width en un media query aplica estilos definidos en un determinado ancho de pantalla. Este ancho de pantalla parte desde 0 hasta lo que se haya colocado en max-width. Pasado este ancho máximo todos los estilos que se hayan puesto dejan de aplicarse en la pantalla.

@media only screen and (max-width: 600px) {
      body {
        background-color: lightblue; /* Aplicará solo desde 0 hasta 600px */
      }
    }

    /* Pasados los 600px, el background deja de ser lightblue */

Sobre min-width

A diferencia de max-width que define el tamaño máximo, min-width define el mínimo tamaño que un elemento puede tener.

Por ejemplo, en el vídeo/gif inferior. Primero se intenta hacer un resize sin min-width. Esto disminuye el ancho del elemento hasta el mínimo posible, haciendo que el elemento se distorsione. Luego, se coloca un valor al min-width del elemento. Con min-width ya puesto se comienza el resize. Sin embargo, a diferencia de la anterior vez, el elemento no se distorsiono a su máximo valor ya que tiene un ancho mínimo especificado. Esta propiedad permite que el contenido que tenga un elemento, no se vea comprometido cuando se haga un resize en la pantalla o si este es de otros dispositivos con diferentes tamaños.

Por el lado del Responsive Design, si en un media query se especifica el min-width, entonces todos los estilos especificados serán aplicados a partir del min-width hacia adelante.

@media only screen and (min-width: 800px) {
      .box {
        background-color: red; /* Aplicará a partir desde los 800px hacia adelante */
      }
    }

Conclusiones

A pesar que algunos elementos del desarrollo web se parezcan, es importante no frustrarse de ello, calmarse y aprender. Aprender a diferenciar y ver la utilidad de tus herramientas puede ser clave al momento de aplicar CSS o implementar un diseño responsivo a un sitio web, inclusive puede ahorrarte líneas de código y abrirte las puertas a otros conocimientos, como el patrón de diseño Mobile First. Pero, sobre todo a ser una mejor desarrolladora o desarrollador.