CSS3 @media queries


If the document width is less than 300 pixels, modify the background-color:

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

Try it out . . .

Define and use

Using @media query, you can define different styles for different media types.

@media can be styled differently for different screen sizes, especially if you need to set up responsive @media is useful.

When you reset the browser size, the page is also re-rendered based on the width and height of the browser.

Browser support

The numbers in the table @media the version number of the first browser of the rule.

Rule
@media 21 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 :

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

The type of media

Value Describe
all For all devices
aural Abandoned. For speech and sound synthesizers
braille Abandoned. Apply to Braille touch feedback devices
embossed Abandoned. A blind printing device for printing
handheld Abandoned. For handheld devices or smaller devices such as PDAs and small phones
print For printer and print previews
projection Abandoned. Used for projecting devices
screen For computer screens, tablets, smartphones, etc.
speech Applied to sounding devices such as screen readers
Tty Abandoned. Used for fixed character grids, such as telegrams, terminal devices, and portable devices with limited characters
tv Abandoned. For TV and network TV

Media features

Value Describe
aspect-ratio Defines the ratio of the width to height of the page visible area in the output device
color Defines the number of colored originals for each set of output devices. If it is not a color device, the value is equal to 0
color-index Defines the number of entries in the color query table of the output device. If you do not use a color query table, the value is equal to 0
device-aspect-ratio Defines the ratio of the screen visible width to height of the output device.
device-height Defines the screen visible height of the output device.
device-width Defines the visible width of the output device's screen.
grid Used to query whether the output device uses a raster or dot matrix.
height Defines the height of the page visible area in the output device.
max-aspect-ratio Defines the maximum ratio of the screen visible width to height of the output device.
max-color Defines the maximum number of colored originals per set of output devices.
max-color-index Defines the maximum number of entries in the color query table for the output device.
max-device-aspect-ratio Defines the maximum ratio of the screen visible width to height of the output device.
max-device-height Defines the maximum height at which the output device's screen is visible.
max-device-width Defines the maximum visible width of the output device's screen.
max-height Defines the maximum visible area height of the page in the output device.
max-monochrome Defines the maximum number of monochrome originals per pixel in a monochrome frame buffer.
max-resolution Defines the maximum resolution of the device.
max-width Defines the maximum visible area width of the page in the output device.
min-aspect-ratio Defines the minimum ratio of page visible area width to height in the output device.
min-color Defines the minimum number of colored originals for each set of output devices.
min-color-index Defines the minimum number of entries in the color query table of the output device.
min-device-aspect-ratio Defines the minimum ratio of the screen visible width to height of the output device.
min-device-width Defines the minimum visible width of the output device's screen.
min-device-height Defines the minimum visible height of the output device's screen.
min-height Defines the minimum visible area height of the page in the output device.
min-monochrome Defines the minimum number of monochrome originals per pixel in a monochrome frame buffer
min-resolution Defines the minimum resolution of the device.
min-width Defines the minimum visible area width of the page in the output device.
monochrome Defines the number of monochrome originals per pixel contained in a monochrome frame buffer. If it is not a monochrome device, the value is equal to 0
orientation Defines whether the height of the page visible area in the output device is greater than or equal to the width.
resolution Define the resolution of the device. Examples: 96dpi, 300dpi, 118dpcm
scan Define the scanning operation for TV-class devices.
width Defines the width of the visible area of the page in the output device.

CSS3 @media queries

More instances

Use @media queries to create responsive designs:

@media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}

.gridmain {
width: 100%;
}

.gridright {
width: 100%;
}
}

Try it out . . .

Related pages

CSS tutorial: CSS media type