La resolución CSS es uno de tipo de datos. Como sugiere el nombre, se utiliza para especificar la resolución, es decir, la densidad de píxeles en el dispositivo de salida. Las resoluciones se utilizan generalmente al escribir consultas de medios. El usuario puede usar la resolución con el prefijo máximo y mínimo mientras escribe la consulta de medios.
¿Qué es Media Query? Media Query se usa para el desarrollo web receptivo que se puede usar para cambiar el estilo de la pantalla según las diversas características del dispositivo de salida. Está definido en CSS3.
Características del tipo de datos de resolución:
- Siempre es un valor positivo.
- Siempre tiene una unidad: dpi, dpcm, dppx, x.
- No debe haber ningún espacio entre el valor positivo y la unidad.
Unidades: Hay 3 unidades principales para especificar la Resolución-
- dpi: Significa Número de puntos por pulgada.
- dpcm: Significa puntos por centímetro.
- dppx o x: puntos por unidad de px.
Ejemplo de resolución:
html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 2px solid #000000;
}
/* Exact resolution */
@media (min-resolution: 10dpi) {
h1 {
color: white;
}
}
/* Exact resolution */
@media (max-resolution: 500dpi) {
h1 {
background: green;
}
}
</style>
</head>
<body>
<h1>Geeks For Geeks Example</h1>
</body>
</html>
Producción:
PRODUCCIÓN
Como se muestra en el ejemplo anterior:
- la resolución mínima se establece en 10 ppp, por lo tanto, en un dispositivo con una resolución superior a 10 ppp color: se aplicará un estilo blanco a la etiqueta <h1>
- la resolución máxima se establece en 500 ppp, por lo tanto, en un dispositivo con una resolución inferior a 500 ppp de fondo: se aplicará un estilo verde a la etiqueta <h1>