9 trucos avanzados de CSS de consulta de medios que debe conocer

Una experiencia usable y accesible es vital para un sitio web exitoso. Si sus lectores tienen una experiencia positiva, es más probable que realicen una llamada a la acción, incluida la compra de productos. También es más probable que regresen o recomienden su sitio a otros. La experiencia es clave.

Las consultas de medios ofrecen diferentes funciones de CSS que pueden personalizar su sitio web. Le permiten personalizar la experiencia de cada usuario en función de las capacidades de su dispositivo. Aprenda a brindar a sus lectores la mejor experiencia, ya sea que usen su teléfono o un monitor de escritorio grande.

1. La característica del puntero

los @regla de medios tiene una función de puntero que le permite personalizar su diseño en función del dispositivo señalador principal. Puede probar la disponibilidad y la calidad.

este puntero función de consulta de medios toma uno de tres valores: ninguno, grueso o fino. los ninguna el valor se aplica cuando no hay un dispositivo señalador. los

grueso El valor se aplica cuando el dispositivo señalador principal tiene un nivel reducido de precisión. Y el multa El valor se aplica cuando el dispositivo señalador principal tiene un alto nivel de precisión.

Uso de la función de puntero

Opciones para elegir: 
 opcion uno
 Opción dos

El código anterior genera dos opciones de radio de entrada, que variarán según la precisión del dispositivo señalador principal de una computadora.

Una computadora que tenga un dispositivo señalador principal preciso (o de alta calidad) mostrará la siguiente página web:

Una computadora que tiene un dispositivo principal con precisión limitada (o baja calidad) mostrará la siguiente página web:

El dispositivo que tiene un dispositivo señalador principal con un nivel limitado de precisión tiene botones de opción más grandes. Esto brinda una mejor experiencia de usuario para dichos usuarios. Con la función de puntero, puede asegurarse de que todos sus usuarios tengan una experiencia agradable, independientemente de su dispositivo.

2. La característica de cualquier puntero

Al igual que la función de puntero, la función de consulta de medios de cualquier puntero apunta a los dispositivos de puntero. Sin embargo, la característica de cualquier puntero evalúa cada dispositivo señalador de una computadora. La característica de cualquier puntero también utiliza el ninguna, grueso, y multa valores.

Uso de la función de cualquier puntero

 @media (cualquier puntero: bien) {
 entrada[tipo="radio"] {
 ancho: 15px;
 altura: 15px;
 borde-radio: 20px;
 ancho del borde: 1px;
 }
 }
@media (cualquier puntero: grueso) {
 entrada[tipo="radio"] {
 ancho: 25px;
 altura: 25px;
 borde-radio: 20px;
 ancho del borde: 2px;
 }
 }

Simplemente puede reemplazar el código anterior con la sección de consulta de medios del código en el ejemplo de la función de puntero. El código anterior muestra una pantalla adecuada en función de la calidad de cualquier dispositivo señalador que pueda tener una computadora.

3. La función de desplazamiento

La función de consulta de medios flotante evalúa si el mecanismo de entrada principal de un dispositivo es capaz de pasar el mouse sobre los elementos en una interfaz de usuario.

Uso de la función de desplazamiento

 /*CSS*/
 a{
 texto-decoración: ninguno;
 de color negro;
 }
 @media (pasar: pasar el ratón) {
 a: flotar {
 color azul;
 }
 }
 HTML 
 un elemento de enlace

El código anterior mostrará un elemento. Cambiará de color (de negro a azul) cada vez que el mecanismo de entrada principal de un dispositivo (que admite desplazamiento) se desplaza sobre él.

4. La característica de cualquier desplazamiento

los cualquier-hover la consulta de medios se dirige a cualquier mecanismo de entrada, incluido el mecanismo de entrada principal.

Uso de la función de pasar el mouse por encima

@media (al pasar el mouse por encima) {
 a: flotar {
 color azul;
 }
 }

La consulta de medios anterior produce un efecto de desplazamiento para cualquier mecanismo de entrada que sea capaz de pasar el cursor sobre un elemento.

5. La función de resolución

La función de consulta de medios de resolución calcula la cantidad de píxeles que muestra un dispositivo específico. Un dispositivo que muestra más píxeles por pulgada tiene una mejor resolución porque muestra imágenes con más detalle. Esta característica puede ayudar a un desarrollador a decidir qué usuarios de dispositivos pueden ver los elementos en una interfaz de usuario con mayor claridad.

La función de resolución utiliza rango. Esto significa que además de usar el resolución palabra clave, puede usar min-resolución y resolución máxima. La función de resolución de consulta de medios pertenece al tipo de datos de resolución. Esto significa que la función de resolución se puede medir en una de tres unidades: puntos por pulgada (dpi), puntos por centímetro (dpcm) o puntos por píxel (dppx).

Uso de la función de resolución

/*CSS*/
@media (resolución mínima: 72 ppp) {
 pags {
 color blanco;
 color de fondo: azul;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

La resolución más baja que puede tener un dispositivo y seguir mostrando imágenes de calidad es de 72 ppp. Entonces, si un dispositivo tiene una resolución de 72 ppp o más, mostrará el siguiente resultado en su navegador:

6. La función de orientación

Una ventana gráfica de dispositivo solo puede tener una de dos orientaciones: retrato o paisaje. Debe tener en cuenta que la orientación de una ventana gráfica es diferente de la orientación de un dispositivo. Si un dispositivo usa un teclado en pantalla, su ventana gráfica puede cambiar de vertical a horizontal mientras el dispositivo en sí todavía está en posición vertical.

Uso de la función de orientación

/*CSS*/
 cuerpo{
 pantalla: flexible;
 }
 sección{
 borde: 2px azul sólido;
 relleno: 3px;
 margen: 3px;
 }
 @media (orientación: horizontal) {
 cuerpo {
 dirección de flexión: fila;
 }
 }
@media (orientación: retrato) {
 cuerpo {
 dirección de flexión: columna;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

El código anterior cambia el diseño de una página web según la orientación de un dispositivo.

Un dispositivo con una ventana gráfica en modo horizontal mostrará la siguiente página web:

Un dispositivo con una ventana gráfica en modo vertical mostrará la siguiente página web:

7. La función de altura

La función de consulta de medios de altura le permite especificar el estilo CSS en función de la altura de la ventana gráfica del dispositivo de un usuario. Esta función es compatible con el rango, por lo que también puede usar el min-altura y Altura máxima palabras clave

Uso de la función de altura

 /*CSS*/
 @media (altura mínima: 360 px) {
 pags{
 borde: 2px rojo anaranjado punteado;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

El código anterior personaliza lo que ve un usuario en función de la altura de su dispositivo. Los usuarios con una altura de dispositivo de 360 ​​px o más verán algo similar a la siguiente página web:

Los dispositivos con una altura inferior a 360 px no mostrarán el borde alrededor del párrafo en la página web.

8. La función de ancho

La función de consulta de medios de ancho le permite crear un estilo CSS específico basado en el ancho de la ventana gráfica del dispositivo de un usuario. Esta función también es compatible con el rango, por lo que tiene la opción de usar el ancho mínimo y anchura máxima palabras clave

Uso de la función de ancho

 /*CSS*/
 @media (ancho mínimo: 600 px) {
 pags{
 borde: 2px púrpura sólido;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

El código anterior personaliza lo que ve un usuario en función del ancho de su dispositivo. Los usuarios con un ancho de dispositivo de 600 px y más verán algo como la siguiente página web:

El uso de consultas de medios basadas en ancho y alto puede ser una estrategia efectiva en hacer que su sitio web sea receptivo.

9. La función de color

La función de consulta de medios de color evalúa el componente de color de un dispositivo (rojo, verde, azul). El valor se refiere a cuántos bits usa una pantalla para cada componente, lo que define cuántos colores diferentes puede mostrar. Los dispositivos modernos suelen utilizar una pantalla de 24 bits que utiliza ocho bits por componente de color. También toma un valor entero, donde un dispositivo incoloro es cero.

La función de color también utiliza el min-color y max-color rangos

Uso de la función de color

 /*CSS*/
 @media (color mínimo: 7) {
 pags{
 borde: 2px verde sólido;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Los dispositivos con un componente de color de siete en adelante mostrarán el siguiente resultado en sus navegadores:

Ahora puede crear experiencias de usuario únicas

Debería poder utilizar estas consultas de medios avanzadas para mejorar la experiencia de cada usuario que visita su sitio web o aplicación. Es importante brindarles a los usuarios de dispositivos móviles y de escritorio una experiencia igualmente positiva en su sitio.

Las consultas de medios no son las únicas herramientas de CSS que pueden fortalecer sus habilidades de desarrollador.

8 consejos y trucos esenciales de CSS que todo desarrollador debe saber

Leer siguiente

Sobre el Autor