Source: https://www.baulphp.com/entendiendo-los-media-queries-css-responsiva/
Timestamp: 2019-07-20 21:51:54+00:00

Document:
Entendiendo los Media Queries CSS Responsiva » BaulPHP
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.
1 Entendiendo los Media Queries CSS Responsiva
1.1 Unos son por Limites de resolución de pantalla. Aquí tendremos dos tipos:
1.1.1 Estilos para resoluciones superiores a “N” Pixeles
1.1.2 Estilos para resoluciones inferiores a “N” Pixeles
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:
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.
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*/}
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 -->
<!-- CSS media query en etiqueta link -->
<link rel="stylesheet" media="(max-width: 800px)" href="estilo.css" />
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 -->
<!-- CSS media queries en hoja de estilos interna -->
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.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución