Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Media screen CSS
1
Author: Fabio Migliaccio
CSS media queries
CSS media queries
css
media
queries
Defnición
Las Media Queries representan una evolución importante de CSS, puesto que suponen la primera estructura condicional en el lenguaje.
Definición@media
query
Las Media Queries de CSS son, consultas sobre las características del medio donde se está visualizando una web (movil, tablet, laptop, desktop ).
Nos sirven para definir estilos condicionales, que solo se aplicarán en caso que esa consulta del medio sea satisfactoria.
Son una de las herramientas fundamentales para implementar el "Responsive Web Design".
En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para distintos tamaños de la pantalla y nos ofrecen muchas posibilidades a la hora de aplicar estilos condicionales, con múltiples casos de uso.
min width:
define el ancho mínimo de un elemento.
max width, min width,
and
max width: define el ancho máximo de un elemento.
min width
-Si el contenido es más pequeño que el ancho mínimo, se aplicará el ancho mínimo.
-Si el contenido es mayor que el ancho mínimo, la min-widthpropiedad no tiene efecto.
Ejemplo:
Usamos mediaquery para establecer el color de fondo en lavanda si la ventana gráfica tiene 800 píxeles de ancho o más, a verde claro si la ventana gráfica tiene entre 400 y 799 píxeles de ancho. Si la ventana gráfica tiene menos de 400 píxeles, el color de fondo es azul claro:
body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
try it : https://www.w3schools.com/cssref/css3_pr_mediaquery.php
max width
Si el contenido es más grande que el ancho máximo, cambiará automáticamente la altura del elemento.
Si el contenido es más pequeño que el ancho máximo, la max-widthpropiedad no tiene efecto.
Ejemplo:
Usamos mediaquery para establecer el color de fondo en verde claro si la ventana gráfica tiene 400 píxeles de ancho o mas , a lavanda si la ventana gráfica tiene entre799 y 400 píxeles de ancho. Si la ventana gráfica tiene mas de 800 píxeles, el color de fondo es azul claro:
body {
background-color: lightblue;
}
@media screen and (max-width: 800px) {
body {
background-color: lavender;
}
}
@media screen and (max-width: 400px) {
body {
background-color: lightgreen;
}
}
try it : https://www.w3schools.com/cssref/css3_pr_mediaquery.php
and
Con el operador and las dos condiciones deben cumplirse para que se evalúe como verdadera.
@media (max-width: 600px) and (orientation: landscape) {
h1{
color: red;
}
}
Esta regla se aplicaría para pantallas con una anchura máxima de 600 píxeles y cuando la orientación está en horizontal.
FIN
Author: Fabio Migliaccio
Sus usos
"Si ocurre ésto, entonces haz tal cosa"
COSTRUCIÒN
CONDICIONAL
- Si la pantalla del usuario tiene estas características, entonces aplica estos estilos
- Si se imprime el documento en la impresora, aplica estos estilos.
- Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición horizontal (landscape), entonces aplica este CSS.
Situaciones como esas son básicas y los diseñadores pueden resolverlas usando las MediaQueries.
Son un paso al frente en cuanto a la separación entre el contenido y su representación, puesto que nos facilitan que el contenido de una página pueda adaptarse al medio donde se está reproduciendo, sólo a través de la definición de estilos, sin tener que tocar el HTML para nada. Para producir Media Queries debemos tener siempre en mente la expresión condicional, aquella que debe cumplirse para que se apliquen ciertos estilos.
Además la expresión condicional puede tener incluso varias condiciones, usando operadores lógicos como "and" para combinarlas. De modo que las circunstancias que se deban cumplir para aplicar unas reglas CSS sean de lo más variadas.
Como
se
aplica
Aplicación de
mediaqueries mediante @media
En el archivo CSS
Este método es el que se usa habitualmente a nivel profesional. Consiste en incorporar los estilos en una construcción @media, donde se apliquen entre llaves todos los estilos que queremos para una consulta de medio dada.
@media (min-width: 500px) {
h1{
margin: 1%;
}
.estiloresponsive{
float: right;
padding-left: 15px;
}
}
Como
funciona
Como puedes ver, tenemos la sentencia @media en la que podemos indicar entre paréntesis las condiciones que deben cumplirse para que se aplique esta mediaquerie. En este caso será para pantallas que tengan una anchura mínima de 500 píxeles.
Luego, entre llaves colocamos todas las reglas y atributos de estilos CSS que necesitemos aplicar en esta situación. Las reglas de estilos son las mismas que pondrías fuera de la estructura condicional. Cuando la sentencia entre paréntesis se evalúe como verdadera, se aplicarán todas ellas.