Screen size and resolution have expanded greatly over the years of the web. Screen sizes alone can range from a postage stamp to a walll. For this reason, we have the media query

Called a query for a reason. You are asking the browser a question or more specificly dictating how to render the objects on a device or media type based on it's characteristics. Device includeds the myriad of screen sizes as well as printers and speech devices.

You can determine media features with the media query like the resolution, min-width, orientation, etc.

@media not|only <mediatype> and (<mediafeature> <and|or|not> <mediafeature>) {
    CSS-Styles
}

There are only a few media types because there are only a few general catagories of media devices

• all - as in all devices and it's the default.
• print - for printers
• screen for the myriad of screens available
• speech - readers that read the text on the screen

any-hover	Is there an input device that allows hovering?
any-pointer	The acuracy of any pointer on the system
aspect-ratio	Viewport ratio (width/height)
color	Number of bits per color component
color-gamut	Supported color ranges
color-index	Number of colors
grid	Bitmap or grid
height	Height of the viewport
hover	Does the pointer allow hovering?
inverted-colors	Are colors being inverted
light-level	Average light level
max-aspect-ratio	Display max ration
max-color	Max number of bits for color components
max-color-index	Maximum number of colors
max-height	Max height of the screen
max-monochrome	Max number of bits for a monochrome device
max-resolution	Max resolution in dpi or dpcm
max-width	Max width of the screen
min-aspect-ratio	Min ration (height/width)
min-color	Min number of color bits
min-color-index	Minimum number of displayable colors
min-height	Minimum height of the display area
min-monochrome	Minimum number of bits
min-resolution	Minimum resolution in dpi or dpcm
min-width	Minimum width of the display area
monochrome	Number of bits - monochrome screen
orientation	Orientation of the viewport
overflow-block	How does the device handle overflow content along the block axis
overflow-inline	Is overflow content scrollable?
pointer	Accuracy of the pointer, if any (course, fine, none)
resolution	Resolution in dpi or dpcm
scan	Scanning process of the device
scripting	Can the device interpret javascript
update	How fast is the device
width	Width of the viewport