css - todos - Consultas de medios para cubrir todas las principales proporciones de PC y portátiles

media query min and max

Question

Quiero crear algunas consultas de medios para cubrir la mayor parte de la relación de aspecto para PC / portátiles.

Mi primer intento fue esto:

@media screen and (min-device-aspect-ratio: 4/3){
     header::after{
         content: ''4/3'';
     }

 }

@media screen and (min-device-aspect-ratio: 16/9){
      header::after{
         content: ''16/9'';
     }
 }

 @media screen and (min-device-aspect-ratio: 16/10){
      header::after{
         content: ''16/10'';
     }
 }

Estaba probando esas consultas desde una computadora portátil con una resolución de 1366x768, que es una relación de aspecto de 16/9, en lugar de esto, se ejecuta la última consulta de 16/10.

Podría hacer esto de la manera clásica, con:

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

pero creo que el diseño receptivo debería enfocarse más en la relación de aspecto que en el ancho de la pantalla, porque es una gran diferencia entre 4: 3 y los anchos 16/9, o tal vez he entendido mal el concepto de diseño receptivo, pero esto es lo que pienso .

Answer 1

Para resolver la ejecución de 16/10 cuando 16/9 está activo, debe definir device-aspect-ratio lugar de la device-aspect-ratio de min-device-aspect-ratio , porque le está diciendo al navegador que ambos (16/10 y 16/9) ) son códigos válidos, y ejecuta el último definido.

 @media screen  and (device-aspect-ratio: 16/9) {
     /* execute only in 16/9 */
 }

 @media screen  and (device-aspect-ratio: 16/10) {
     /* execute only in 16/10 */
 }

Edición

Como dijo God (MDN), la relación device-aspect-ratio está obsoleta y en su lugar debemos usar aspect-ratio . Acepta prefijos min y max .

• Consultas de medios: relación de aspecto del dispositivo
• Consultas de medios: relación de aspecto

Answer 2

La idea del diseño receptivo es simplemente esta: que su diseño responde a las variaciones o incluso a los cambios a pedido en los medios que consumen su diseño. Si lo hace mirando la resolución de pantalla o la relación de aspecto de pantalla es completamente un detalle de implementación, y no muy pertinente.

La relación 16/9 se evalúa a 1.777 ... mientras que la relación 16/10 se evalúa a 1.6. Como la relación 16/9 es claramente mayor que 16/10, cualquier cosa que sea min-device-aspect-ratio: 16/9 es necesariamente también min-device-aspect-ratio: 16/10 .

La solución es colocar la consulta 16/10 antes del 16/9, de modo que todas las relaciones estén en orden ascendente:

@media screen and (min-device-aspect-ratio: 4/3) {
    header::after {
        content: ''4/3'';
    }
}

@media screen and (min-device-aspect-ratio: 16/10) {
    header::after {
        content: ''16/10'';
    }
}

@media screen and (min-device-aspect-ratio: 16/9) {
    header::after {
        content: ''16/9'';
    }
}

Vea mi respuesta a esta pregunta relacionada para obtener una explicación de cómo funciona esto.