CSS responsive: media query
Cuando diseñamos una página web no sabemos quien va a verla y donde va a hacerlo. Pero deseamos que sigan viéndose bien y mantengan nuestro diseño al máximo.
Esto es el diseño responsive, en castellano diríamos adaptativo: la página se adapta al marco de visión
El mecanismo es fácil: se define una regla CSS para un elemento y depués se vuelve a definir la regla para un contexto determinado o para unas condiciones dadas (pantalla pequeña, impresora, etc)
Conseguir estilos responsive
Lograr que una página mantenga el diseño independientemente del medio usado para verla realmente no es posible: un diseño para un formato de monitor de sobremesa no puede ser exactamente igual al de una pantralla de móvil vista en vertical, por ejemplo.
Lo que si podemos hacer es controlar el aspecto de nuestra página cuando cambia de pantalla de visión, o cuando va a ser enviada a una impresora.
Para esto se usa el comando CSS @media que permiten establecer condiciones para que se aplique una u otra regla de estilo dependiendo del contexto en que se vea la página.
Es fácil: observa esta regla que ocultará una imagen si la página va a ser impresa:
<style>
@media printer{
.prn{
display: none;
}
}
</style>
Si en una página web usamos una imagen con class="prn" al imprmir la página la imagen no se verá en la copia impresa.
El uso de esta rule-at, que dirían los ingleses, es simple @media seguida de los medios a que se aplican y las condiciones para aplicar las reglas que irán encerradas en un bloque entre llaves { }.
Hace ya bastante tiempo que los accesos a la red se realizan mediante móviles, tablets y otras pantallas diferentes al monitor desktop.
Esto obliga a realizar diseños adaptados a esos medios, de ahí la necesidad del diseño responsive (adaptativo)
Medios y condiciones
Si no se especifica, la regla media query las reglas que defina se aplica a todos los medios usados para acceder a al página web. seria como devir medios all. Aunque realmente @query puede ir seguido por el nombre del medio:
- screen: las reglas se destinan a paginas vistas en pantallas
- printer: reglas aplicables para medios impresos
- speech: reglas aplicables para dispositivos hablados (sintetizadores de voz)
Lo más normal es que uses definiciones para todos los medios. Si un conjunto de reglas se usa para más de un medio los nombres de los medios es escriben separados por comas.
Además los medios pueen tener características como por ejemplo quiero la página con fonode verde (green) si se ve en una pantalla (screen) en color.
<style>
@media screen and (color){
body{
background: green;
}
}
</style>
De la misma forma si quiero evitar que un conjunto de reglas se aplique en un medio específico (o en unas condiciones concretas) puedo usar el operar dor not (ojo que se aplica a toda la condición que le siga al completo)
Existen otros muchos medios, pero se aconseja usar estos detallados aquí
El orden de las reglas es importante: la primera regla actúa por defecto y la misma regla dentro de un comando media modifica a la definida por defecto..
Condiciones para la aplicación
Como has visdto en los ejemplos la regla @media es una manera de crear reglas alternativas según las condiciones en las que se muestra la página. Ya has visto que podemos aplicar una u otra regla según el medio.
Pues una vez tengamos el medio (habitualmente lo dejaremos por defecto, como si pusieramos all) podemos empezar a poner condiciones mas concretas.
Vamos a los casos más usados, los aplicados a las pantallas.
Como has visto los media query permiten cambiar los estilos según el tamaño de la pantalla. Esta regla consulta (query) el medio en que está viéndose la página y las condiciones en que se están viendo. Si esas condiciones coinciden con las escritas en la regla pues se aplica el conjunto de estilos alternativo.
<style>
.ancho{
widht: 400px;
height: 400px;
}
@media (max-width: 768px){
.ancho{
width: 50px;
height: 50px;
}
}
</style>
Ves que el selector .ancho está definido para que si se aplicase a una imagen la muestre con un tamaño de 400x400 pixesl. Pero la media query dice que si el medio (cualquiera, all) tiene un ancho inferior a 768px esas dimensiones serían de 50x50 pixels. Aplicado a una imagen quiere decir que en pantallas pequeñas (hasta un ancho máximo de 768px) la imagen se verá pequeña (50px por 50px) y en pantallas grandes se verá a 400x400.
Lee esta regla como "estas reglas son váidas como máximo con un pantalla de 768px de ancho".
¿Y si quiero que un estilo se aplique entre dos valores de width?
<style>
.ancho{
widht: 400px;
height: 400px;
}
@media (min-width: 768px) and (max-width: 1024px){
.ancho{
width: 50px;
height: 50px;
}
}
</style>
En este caso la regla .ancho para imagen 50x50 se aplica entre anchos de pantalla 768 y 1024 pixels.
La mayor parte de las propiedades numéricas tiene la opción de max y min, como las usadas aquí. Es decir se puede condicionar un estilo a una ancho o alto exacto, pero tiene más sentido usar rangos o valores límites como en estos ejemplos.
Como ves las condciones se conectan mediante el operador and.
Si quieres una regla que se aplique para varias condiciones usa una lista de estas condiciones separadas por coma.
<style>
.ancho{
widht: 400px;
height: 400px;
}
@media (min-width: 768px), (orientation: portrait){
.ancho{
width: 50px;
height: 50px;
}
}
</style>
En este ejemplo la regla de tamaño se aplica tanto para pantallas mayores de 768px como para pantallas con orientación en vertical.
Las condiciones no son solo de tamaño. Hay otras muchas, las más relevantes:
- resolución de pantalla (resolution)
- orientación (orientation)
- relación ancho alto (aspect-ratio)