Tres días hace ya que expliqué el uso de la etiqueta meta viewport. Hoy explicaré el uso de las propiedades max-width y min-width, dos propiedades de CSS3 que serán clave en el Responsive Design.
Los nombres de estas propiedades definen bastante bien la función que realizan:
- max-width : Definir un ancho máximo.
- min-width : Definir un ancho mínimo.
En Responsive Design toman mucho protagonismo porque usando estas dos propiedades en los media queries (tema que trataré en el próxima entrada) junto con la etiqueta meta viewport, van a permitir dar estilos concretos a un sitio web en función del ancho de la pantalla. Esto dará juego a que las cosas se muestren de una manera u otra dependiendo de si el sitio web es visto desde un ordenador, una tablet, un teléfono móvil, etc.
En ambas propiedades, el valor podrá ser definido en píxeles (px) o en porcentaje (%).
Estas propiedades pueden ser usadas como cualquier otra propiedad CSS:
selector {
max-width: 300px;
min-width: 100px;
}
Y también en los media queries:
@media only screen and (min-width: 480px) and (max-width: 767px) {
...
}
Espero que haya quedado todo bastante claro, y sino, se admiten preguntas en los comentarios.
