CSS @media query

@media screen and (max-width: 600px) {
            .body{
                background-color:lightblue;
            }
        }

The above code function is: if the document width is less than 600 pixels modifying the background color (background-color).

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

The code represents the width of the browser and is less than or equal to 960px 1200px use style.

Definition and use

Use @media query, you can define different styles for different media types. @media can set up different styles for different screen sizes, especially if you need to design responsive page, @ media is very useful.

When you reset the browser size of the process, the page will be re-render the page according to the width and height of the browser.

CSS syntax

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

You can also use different media for different  stylesheets  :

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

(Media types) mediatype values:

value	description
all	For all devices
aural	Obsolete. For speech and voice synthesizer
braille	Obsolete. Braille applied touch feedback device
embossed	Obsolete. Blind printing apparatus for printing
handheld	Obsolete. For smaller handheld devices, or devices, such as PDA and small telephone
print	For printers and print preview
projection	Obsolete. A projection apparatus
screen	For computer screens, tablet PCs, mobile phones only
speech	Applied to screen readers and other sound equipment
tty	Obsolete. For a fixed character grid
tv	Obsolete. For TV and Internet TV

Media features (media feature)

value	description
aspect-ratio	Definition of the output device page visible region of width to height ratio of
color	Defines the number of output devices of each group of color originals. If the device is not a color, then the value is equal to 0
color-index	Defines the number of entries in the color look-up table in the output device. If you do not use a color lookup table, the value is equal to 0
device-aspect-ratio	Output devices visible screen definition width to height ratio.
device-height	Screen definition output device highly visible.
device-width	Visible screen definition output device width.
grid	Used to query whether the output device using a grid or lattice.
height	Definition of the output device highly visible area of ​​the page.
max-aspect-ratio	Visible screen definition output device width to height ratio of the maximum.
max-color	Define the maximum number of output devices of each group of color originals.
max-color-index	It defines the maximum number of entries in the color look-up table in the output device.
max-device-aspect-ratio	Visible screen definition output device width to height ratio of the maximum.
max-device-height	Screen definition output devices visible to the maximum height.
max-device-width	Screen definition maximum visible width of the output device.
max-height	The maximum height of the visible area of ​​the page is defined in the output device.
max-monochrome	The maximum number is defined in a monochrome original monochrome frame buffer included in each pixel.
max-resolution	The maximum resolution of the device is defined.
max-width	Definition of the output device in the visible region of the maximum width of a page.
min-aspect-ratio	Definition of the output device page visible region minimum ratio of width to height.
min-color	Each group of output devices defined minimum number of color originals.
min-color-index	Defines the minimum number of entries in the color look-up table in the output device.
min-device-aspect-ratio	An output device visible screen definition minimum ratio of width to height.
min-device-width	Screen definition minimum visible width of the output device.
min-device-height	Minimum screen output apparatus defined highly visible.
min-height	Definition of the output device in the visible region of the minimum height of the page.
min-monochrome	The minimum number of monochrome originals are defined in a single color per pixel frame buffer included
min-resolution	Minimum resolution defined devices.
min-width	Definition of the output device in the visible region of the minimum width of a page.
monochrome	Define a number of monochrome original monochrome frame buffer for each pixel included. If the device is not monochromatic, the value is equal to 0
orientation	Definition of the output device in the visible region of the height of the page is greater than or equal to a width (vertical screen).
resolution	Define the resolution of the device. Such as: 96dpi, 300dpi, 118dpcm
scan	Process definition television type scanning device.
width	Definition of the output device in the visible region of the page width.