Portada » Pagina » Entendiendo los Media Queries CSS Responsiva

Entendiendo los Media Queries CSS Responsiva

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.

Entendiendo los Media Queries CSS Responsiva
Entendiendo los Media Queries CSS Responsiva

Referencia

Media Queries CSS

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad