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;
}
}
body {
background-color: lightblue;
}
}
try it"
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;
}
CSS-Code;
}
You can also use different stylesheets for different media:
<link rel = "stylesheet" media = "mediatype and | not | only (media feature)" href = "mystylesheet.css">
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 |
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. |
More examples
Examples
Use @media queries to create responsive design:
@media only screen and (max-width : 500px) {
.gridmenu {
width: 100%;
}
.gridmain {
width: 100%;
}
.gridright {
width: 100%;
}
}
.gridmenu {
width: 100%;
}
.gridmain {
width: 100%;
}
.gridright {
width: 100%;
}
}
try it"
Related Pages
CSS tutorial: CSS media types