Una de estas reglas es @media, el cual con la combinación adecuada de condiciones nos permite saber la dimensión de la pantalla como tal, y dependiendo del resultado tomar las acciones pertinentes en cuanto al diseño de la misma.
Utilizando media queries
Vamos a crear un código HTML sencillo y allí vamos a incluir nuestra hoja de estilo, la cual contendrá las reglas para nuestro media querie, veamos:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Detectar dimensiones de la pantalla</title> <style> @media (min-width: 600px) { h1 { background-color: blue; } } @media (max-width: 400px) { h1 { background-color: red; } } </style> </head> <body> <h1>Al aumentar o disminuir las dimensiones de la pantalla este texto cambia de color</h1> </body> </html>Como vemos es un código bastante sencillo, sin embargo hay varias cosas que destacar. Lo primero está encerrado en las etiquetas style, allí tenemos dos reglas, la primera indica que a partir de 600 pixeles el color de fondo de nuestro texto en la etiqueta h1 cambiará a azul, veamos cuando redimensionamos en el navegador y se hace efectivo este cambio:
La segunda regla indica que si el ancho máximo es de 400 pixeles el color de fondo del texto cambiará a rojo, lo cual nos indica una tercera condición, ya que todo lo que esté por debajo de 400 pixeles será rojo y por encima de 600 será azul, entonces de 401 a 599 pixeles mantendrá el color blanco por defecto, veamos:
Por último si disminuimos mucho más la pantalla de nuestro navegador entraremos en la regla para nuestro color de fondo rojo, veamos como luce:
Vemos entonces que detectar las dimensiones de nuestro navegador es una tarea sumamente sencilla gracias a CSS3, algo que nos viene sumamente útil cuando estamos trabajando con diseños responsive y necesitamos saber las dimensiones del navegador del usuario para aplicar estilos que hagan que nuestro sitio web se vea bien en cualquier dispositivo y resolución de pantalla existente.
Buen tutorial, habia una cosa que no entendia bien. Ahora si.