Puntos de interrupción típicos del dispositivo. Hay toneladas de pantallas y dispositivos con diferentes alturas y anchos, por lo que es difícil crear un punto de interrupción exacto para cada dispositivo. Para mantener las cosas simples, podrías apuntar Cinco grupos:

1.- Dispositivos extra pequeños (teléfonos, 600px y abajo)

@media only screen and (max-width: 600px) { ... }

2.- Dispositivos pequeños (tabletas verticales y teléfonos grandes, 600px y superiores)

@media only screen and (min-width: 600px) { ... }

3.- Dispositivos medianos (tabletas horizontales, 768px y superiores)

@media only screen and (min-width: 768px) { ... }

4.- Dispositivos grandes (portátiles/ordenadores de sobremesa, 992px y superiores)

@media only screen and (min-width: 992px) { ... }

5.- Dispositivos extra grandes (computadoras portátiles y de escritorio grandes, 1200px y superiores)

@media only screen and (min-width: 1200px) { ... }

Orientación: Retrato / Paisaje

Las consultas de medios también se pueden utilizar para cambiar el diseño de una página en función de la Orientación del navegador.

Puede tener un conjunto de propiedades CSS que sólo se aplica cuando la ventana del navegador es más ancha que su altura, lo que se denomina orientación "paisaje":

Ejemplo: La página web tendrá un fondo azul claro si la orientación está en modo horizontal:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

También puede tener diferentes hojas de estilo para diferentes medios, como éste:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

Ejemplo: Es más ancho que 320px y más estrecho que 768px

@media screen (min-width: 320px) and (max-width: 768px) { ... }

Utilizando operadores

utilizando operadores menores que (), mayores que () y son iguales a ().
Entonces, ese último ejemplo se puede convertir a la nueva sintaxis, así: < >=

@media (30em <= width <= 80em) { ... }

Otra

@media screen (min-width: 320px) and (max-width: 768px) and (orientation: landscape){ ... }

960px, 800px, 640px, 540px y 480px.

Longitudes absolutas

Unidad	Descripción
cm	centímetros
mm	milímetros
in	pulgadas (1in = 96px = 2,54 cm)
px	píxeles (1px = 1/96 de 1 pulgada)
pt	puntos (1pt = 1/72 de 1 pulgada)
pc	picas (1pc = 12 pt)

Longitudes relativas

Unidad	Descripción
em	En relación con el tamaño de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual)
ex	En relación con la altura x de la fuente actual (rara vez se usa)
ch	En relación con el ancho del "0" (cero)
rem	En relación con el tamaño de fuente del elemento raíz
vw	En relación con el 1% del ancho de la ventanilla
vh	En relación con el 1% de la altura de la ventana gráfica
vmin	En relación con el 1% de la dimensión más pequeña de la ventanilla
vmax	En relación con el 1% de la dimensión más grande de la ventana gráfica
%	En relación con el elemento primario

CONTENIDO