Media Queries
Unlike media types that simply tell you the type of the device, media queries add a level of logic to CSS that says if a condition is met, then the styles should be applied, otherwise they should be ignored. This means that rather than simply targeting a device by type, you can now target the individual characteristics of the device.
width | min-width | max-width
The width query allows you to test against the width of the browsers viewport. This enables you to target styles at specific browser widths. Not only are you able to test against a set width, but you are also able to target either the minimum width or maximum width of the browser viewport. This means you can use this query to match a wide variety of different device widths. The width media expression is one of the most used media expressions for adapting sites to be responsive.
height | min-height | max-height
The height query allows you to test against the height of the browsers viewport. Similar to the width query, you are able to target an exact height, minimum height, or maximum height. Although the height query is used less often than the width query, the height query can be especially useful where you want to ensure specific content is viewable (or not viewable) to your users when the page first loads, as you can use it to adjust the height of your content to best suit the height of the viewport.
device-width | min-device-width | max-device-width
The device-width query allows you to test against the width of the device. You are able to target either an exact width, minimum width, or maximum width. The difference between width and device-width is that width is related to the width of the browser, whereas device-width is related to the width of the screen of the device. Although there are some use cases for using device-width, the problem is that if the user resizes the browser on a desktop, the site wouldn’t resize to fit. Additionally, if you are using the viewport meta tag and setting width to be equal to device-width, you should just use the width query.