CSS media queries min-width and min-device-width conflicting?

Question

CSS media queries min-width and min-device-width conflicting?

Soy muy nuevo en el mundo de las consultas de medios, y está claro que hay algo fundamental que me falta sobre la diferencia entre el ancho y el ancho del dispositivo other aparte de sus capacidades de segmentación obvias.

Me gustaría dirigirme tanto a computadoras normales como a dispositivos con los mismos puntos de interrupción, por lo que acabo de duplicar todas mis consultas de ancho mínimo y máximo a las consultas de ancho mínimo y máximo de dispositivo. Por cualquier razón, cuando agrego las contrapartes-device, mi CSS se interpreta muy de manera diferente por las computadoras normales, y no estoy seguro de lo que estoy haciendo mal.

Puedes ver los efectos aquí (así es como debería verse)

Y aquí (después de agregar-device-width a mis consultas, mi CSS se atornilla en el ancho más pequeño the las resoluciones más grandes se ven incluso cuando el ancho del navegador es menor de lo que se llama).

Aquí están mis enlaces CSS is ¿hay algo mal con mi sintaxis? :

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">

28

css media-queries css3

Author: seaofinformation, 2013-03-07

Source

1 answers

score 74 · Accepted Answer

Device-width se refiere a la resolución de la pantalla (por ejemplo. el 1024 de 1024x768), mientras que width se refiere al ancho del navegador en sí (que será diferente de la resolución si el navegador no se maximiza). Si su resolución es lo suficientemente grande como para llegar a un punto de interrupción, pero el ancho del navegador es lo suficientemente pequeño como para llegar a otro, terminará con una extraña combinación de ambos.

A menos que tenga una razón legítima para restringir las hojas de estilo resolución y no el tamaño de la ventana, entonces simplemente use min-width/max-width y evitar min-device-width/max-device-width.