0
510
Views¿Podemos aplicar CSS usando Resolución de pantalla en lugar de Viewport?
Quiero agregar un estilo CSS basado en la resolución de la pantalla en lugar de Viewport.
Este es el caso: la resolución de mi pantalla es (1980 px x 1080 px) y si configuro Windows 10 "Escala y diseño" al 125 %, cambia la ventana gráfica de la pantalla y muestra ese estilo de ventana gráfica. Quiero mostrar mi estilo de medios basado en la resolución de la pantalla, no en la ventana gráfica.
Actualmente, estoy usando estas consultas de medios para una resolución grande:
// X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } // XX-Large devices (larger desktops, 1400px and up) @media (min-width: 1400px) { ... }¿Podemos lograr esto usando solo CSS, no JS?
Capturas de pantalla:
Ventana 10 Escala 100% :
Vista a escala 100%:
Ventana 10 Escala 125%:
Vista a escala 125%:
2 answers
Answer question0
Para distinguir entre cambios de escala, debemos observar la densidad de píxeles. Y la función de medios de resolución se puede usar para eso:
/* used just for the demo*/ * { margin: 0; padding: 0; } /* your normal device specific media queries @media (min-width: 1200px) { ... } @media (min-width: 1400px) { ... } */ /***********************/ .nonscaling { transform-origin: 0 0; background-color: wheat; width: fit-content; } /* scaling media queries */ /* 1. scale and layout setting at 100% */ @media (resolution: 1dppx) { .scale::after { content: '100%'; } } /* 2. scale and layout setting at 125% */ @media (resolution: 1.25dppx) { .scale::after { content: '125%'; } .nonscaling { /* offset the scaling */ /* factor = 100/125 percent */ transform: scale(0.80); } } /* 3. scale and layout setting at 150% */ @media (resolution: 1.5dppx) { .scale::after { content: '150%'; } .nonscaling { transform: scale(0.6666); } } /* 4. scale and layout setting at 175% */ @media (resolution: 1.75dppx) { .scale::after { content: '175%'; } .nonscaling { transform: scale(0.5714); } } <div class="nonscaling">I will not scale! Period.</div> <div class="scale">You've scaled: </div>En la configuración de Windows, cambie la configuración de
Scale and layout a 100%, 125%, 150% o 175%. Y ver el efecto aquí.En el fragmento anterior, estamos usando la unidad
dppx , puede usar otras unidades . Para compensar los elementos escalados, estamos utilizando la función transform: scale(..) . Puede usar el zoom , pero Firfox no lo admite .Nota: puede aplicar
transform:scale(..) a la etiqueta de todo el cuerpo para manejar todo el contenido con una sola regla.Además, puede probar combinaciones de resolución mínima, resolución máxima y ancho mínimo, ancho máximo como
@media (min-width:1200px) and (resolution: 1dppx) .0
Desafortunadamente, simplemente no hay forma de descartar la configuración de escala de pantalla actual y trabajar solo con la resolución, ya que afecta directamente a la ventana gráfica. Sin embargo, puede utilizar la siguiente consulta de medios:
@media screen and (min-resolution: 125dpi) { /* Your code here */ }Esto afecta a los elementos: a) cuando la escala de visualización se establece en 125 % o más , y b) cuando el nivel de zoom en su navegador se establece en 125 % o más .
Otra buena práctica es dar max-width: 100%; a las etiquetas html y body de su sitio web. Esto evitará que los distintos elementos alcancen un tamaño que los sitúe fuera de la ventana gráfica visible (a menos, por supuesto, que estén colocados de forma absoluta).