Question on Fluid Web design [closed]

Question

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 ?