¿Las consultas de medios de CSS min-width y min-device-width están en conflicto?

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

Me gustaría orientarme tanto a computadoras comunes 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 para las consultas de mínimo y máximo ancho del dispositivo. Por alguna razón, cuando agrego las contrapartes del dispositivo, mi CSS es interpretado de manera muy diferente por las computadoras comunes, y no estoy seguro de lo que estoy haciendo mal.

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

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

Aquí están mis enlaces CSS: ¿hay algún problema con mi syntax? :

      

Ancho del dispositivo se refiere a la resolución de la pantalla (por ejemplo, el 1024 de 1024×768), 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 tu resolución es lo suficientemente grande como para llevarte a un punto de quiebre, pero el ancho del navegador es lo suficientemente pequeño como para llevarte a otro, terminarás con una combinación extraña 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, simplemente use min-width / max-width y evite min-device-width / max-device-width .