Entendiendo los Media Queries CSS Responsiva. Hoy en día hablar de una página sin CSS y medias queries es estar muy obsoleto. Es muy importante entender para implementar estos estilos de código dentro de nuestras páginas web, sin embargo, implementar estos fragmentos a veces es una tarea titánica, adaptar a las resoluciones de múltiples dispositivos que existen en el mercado de hoy en día, sino también, conocer la cantidad de pixeles de cada pantalla y la orientación del mismo.
Entendiendo los Media Queries CSS Responsiva
Sin embargo, tendremos que crear estilos básicos para «móviles”, “PCs de escritorio», » Tabletas», «Celulares», pero también deberemos especificar estilos que los dispositivos sean responsivas y se adapten con mucha facilidad.
Unos son por Limites de resolución de pantalla. Aquí tendremos dos tipos:
Estilos para resoluciones superiores a “N” Pixeles
Si necesitamos estilos que se apliquen para resoluciones superiores a un tamaño especifico deberemos usar:
@media only screen and (min-width: Npx) { /*Nuestras Clases e identificadores CSS*/}
Expliquemos este fragmento de código.
En donde “N” es el punto, y los estilos que están dentro de esta declaración se aplicarán cuando la resolución sea superior a esta resolución de pantalla.
Estilos para resoluciones inferiores a «N» Pixeles
Si necesitamos estilos que se apliquen para resoluciones inferiores a un tamaño especifico deberemos usar:
@media only screen and (max-width: Npx) { /*Nuestras clases, identificadores y etiquetas CSS*/}
Expliquemos este fragmento de código.
En donde «N» es el punto, y los estilos que están dentro de la declaración se aplicarán cuando la resolución sea inferior a esta resolución de pantalla.
Declaracion media queries externa
<!-- CSS media query en etiqueta link --> <link rel="stylesheet" media="(max-width: 800px)" href="estilo.css" /> <!-- CSS media query en etiqueta link -->
Declaración media queries interna
<!-- CSS media queries en hoja de estilos interna -->
<style>
@media (max-width: 600px) {
.titulo {
display: none;
}
}
</style>
<!-- CSS media queries en hoja de estilos interna --> Conclusiones
Por lo general estos estilos se declaran por debajo de los estilos principales y sobrescriben a los estilos generales ya declarados; por ejemplo, si tenemos una hoja de estilos hemos definido el color de fondo azul para cualquier resolución, y en resoluciones inferiores a 1024 pixeles hemos definido de color verde, y fondo de color rojo para resoluciones inferiores a 480 pixeles, solo se mostrará ese color porque ya hemos declarado en los medias queries.
Referencia
