Implement CSS media queries for all target devices

[art-in]

Media queries should clearly distinguish desktop, tablet and smartphone browsers, for applying CSS rules.

[art-in]

Media queries is a great way for managing CSS rules for different devices.

Problem is that browsers give wrong values to the queries, so resulting query can also be evaluated incorrectly.

My goal was to create such queries, which will give appropriate CSS file for target device (D=Desktop, T=Table, S=Smartphone), and appropriate CSS file when simply resizing viewport in Desktop.
To distinguish target device you can't just use width, it is the same for T and S. You have to use device-width.
Ok then. But if you only rely on device-width, you will not support resizing in D.
Also my preference was to deny cascading inheritance in styles from different CSS files.

As a result I've created working (but bulky!) media queries, which clearly distinguish styles for target devices and for different sizing of desktop browser without styles overlapping.