There are 2 ways in which we can implement a fluid design (one that would adjust itself to the screen size on which it is viewed on);
Approach 1: We can just use the available browser size (or viewport width/height) and accordingly define our CSS.... This is equivalent to using say a CSS @media max-width:320px In this approach, even a desktop browser which is squeezed to a very small size would display the same design as on a mobile device
Approach 2: We design our CSS based on the device which it is viewed on (desktop/mobile/tablet). This is equivalent to using say a CSS @media min-device-width:768px
So if you see, there is a difference in how we are identifying which CSS to apply based on either "width" OR "device-width"
My question is NOT about media queries and HOW to apply them at all..
My question is which out of the 2 design approaches should be the preferred one, any PROS/CONS for either of them? Should we design for a device OR should we design for the available browser area ?