link - title css

¿Las consultas de medios de CSS son mínimas en anchura y mínimas en el ancho de dispositivo?

Question

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

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

Puedes ver los efectos aquí (esto es lo que DEBE lucir)

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

Aquí están mis enlaces de CSS, ¿hay algún problema 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">

Answer 1

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

A menos que tenga un motivo legítimo para restringir las hojas de estilo en función de la resolución y no del tamaño de la ventana gráfica, utilice simplemente min-width / max-width y evite min-device-width / max-device-width .