Firstly, you can set style by selecting a particular style sheet for different screen resolutions or media types and devices.

<link rel='stylesheet' media='mediatype and|not|only (media feature)' href="stylesfile.css">

However,  the @media is a CSS rule that allows you to set different styles for diferent screen resolutions or media types/devices. CSS3 uses  media queries to check out

• width and height of the device
• width and height of the area of a web page visible to a viewer on a browser ( viewport)
• landscape or portrait orientation
• resolution

@media not|only mediatype and (media feature) {
a list of CSS rules….
}

Media types can be:

• all     For use with all media type devices
• print     For printer output
• screen     PCs Laptops, tablets, smart-phones
• speech     for browsers with speech output

A short list of some of the media features are:

aspect-ratio     of the viewport
color     supported  on the output device
color-index     The number of colors available
device-height  of the device’s screen
device-width
height      of the  viewport
width     of the viewport
max-device-height
max-device-width
max-height   of the display area, e.g a browser window
max-resolution  of the device, using dpi or dpcm
min-resolution
max-width     display area, e.g.  browser window
min-device-width  of the device
min-device-height
min-height   of the display area
min-width
orientation     landscape or portrait

An example of setting a larger font for a lower resolution mobile phone screen of 480 pixels or less. The better resolution screens can use 12pixels instead.

@media only screen and (max-width: 480px) {
    .content{
font-size:14px;
}
@media screen and (min-width: 481px) {
    .content{
font-size:12px;
}
}