CSS3 @media query

Examples

If the document width less than 300 pixels is to modify the background presentation (background-color):

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

Definitions and use

Use @media queries, you can define different styles for different media types.

@media can be set for different screen sizes different styles, especially if you need to set design responsive pages, @ media is very useful.

When you reset the browser size of the process, the page will be re-render the page based on the browser's width and height.

Browser Support

Figures in the table indicate support @media rules first browser version number.

Rule
@media	twenty one	9	3.5	4.0	9

CSS Syntax

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

You can also use different stylesheets for different media:

media type

value	description
all	For all devices
aural	Obsolete. For speech and voice synthesizer
braille	Obsolete. Braille equipment used in touch-feedback
embossed	Obsolete. Blind printing apparatus for printing
handheld	Obsolete. For handheld devices or smaller devices, such as PDA and small telephone
print	For printers and print preview
projection	Obsolete. For projection equipment
screen	For computer screens, tablet PCs, smart phones and the like.
speech	Applied to screen readers and other sound equipment
tty	Obsolete. For fixing the character grid, such as the telegraph, terminal equipment and limited character of the portable device
tv	Obsolete. For TV and Web TV

Media features

value	description
aspect-ratio	Define the output device in the visible region of the page width to height ratio
color	Define the output device in each group the number of the color original. If it is not a color device, the value is equal to 0
color-index	The number of entries in the color look-up table is defined in the output device. If you do not use a color lookup table, the value is equal to 0
device-aspect-ratio	Screen definition output device visible width to height ratio.
device-height	Screen definition output device visible height.
device-width	Screen definition output device visible width.
grid	Output device used to query whether the grid or lattice.
height	Define the output device in the visible region of the page height.
max-aspect-ratio	Screen definition output device visible maximum ratio of width to height.
max-color	Define the maximum number of output devices each set of color original.
max-color-index	The maximum number of entries in the color look-up table is defined in the output device.
max-device-aspect-ratio	Screen definition output device visible maximum ratio of width to height.
max-device-height	Screen define the output devices visible to the maximum height.
max-device-width	Screen definition output device maximum visible width.
max-height	Define the output device in the visible region of the maximum height of the page.
max-monochrome	Is defined in a monochrome frame buffer contains per pixel is the maximum number of monochrome original.
max-resolution	Maximum resolution defines the device.
max-width	Define the output device in the visible region of the maximum width of the page.
min-aspect-ratio	Define the output device in the area of the page visible minimum ratio of width to height.
min-color	Define the output device each set minimum number of the color original.
min-color-index	The minimum number of entries in the color look-up table is defined in the output device.
min-device-aspect-ratio	Screen define the output devices visible minimum ratio of width to height.
min-device-width	Screen output devices defined minimum visible width.
min-device-height	Minimum define the output device's screen visible height.
min-height	Define the output device in the visible region of the minimum height of the page.
min-monochrome	The minimum number of color originals is defined in a monochrome frame buffer contains per pixel
min-resolution	The minimum resolution defines the device.
min-width	Define the output device in the visible region of the minimum width of the page.
monochrome	Is defined in a monochrome frame buffer contains per pixel monochrome original number. If it is not a monochrome device, the value is equal to 0
orientation	Define the output device in the visible region of the page height is greater than or equal to the width.
resolution	Define the resolution of the device. Such as: 96dpi, 300dpi, 118dpcm
scan	Scanning Process Definition TV type of equipment.
width	Define the output device in the visible region of the page width.