Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS3 how to achieve media query, the article is very detailed, has a certain reference value, interested friends must read it!

Example

Modify the background presentation (background-color) if the document width is less than 300 pixels:

@ media screen and (max-width: 300px) {

Body {

Background-color:lightblue

}

}

Definition and use

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

@ media can set different styles for different screen sizes, especially if you need to set up a responsive page, @ media is very useful.

When you resize the browser, the page will also re-render the page according to the width and height of the browser.

Browser support

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

Rule@media2193.54.09

CSS syntax

@ media mediatype and | not | only (media feature) {

CSS-Code

}

You can also use different stylesheets for different media:

Media Typ

The value describes that all is used for all devices aural is obsolete. Braille for voice and voice synthesizer has been deprecated. Embossed used in Braille touch feedback device has been abandoned. The blind printing equipment handheld for printing has been abandoned. Used for handheld devices or smaller devices such as PDA and small phone print for printers and print preview projection has been deprecated. Used for projection device screen for computer screens, tablets, smartphones, etc. The application of speech to audible devices such as screen readers tty has been abandoned. Fixed character grids such as telegrams, terminal devices, and tv, a portable device with restrictions on characters, have been abandoned. For TV and Internet TV

Media function

Value description aspect-ratio defines the ratio of the width to height of the visible area of the page in the output device color defines the number of color originals per set of output devices. If it is not a color device, the value is equal to the number of entries defined by 0color-index in the color lookup table of the output device. If a color lookup table is not used, the value is equal to the ratio of the screen visible width to height of the output device defined by 0device-aspect-ratio. Device-height defines the screen visibility height of the output device. Device-width defines the screen visible width of the output device. Grid is used to query whether the output device uses a grid or lattice. Height defines the height of the visible area of the page in the output device. Max-aspect-ratio defines the maximum ratio of screen visible width to height of the output device. Max-color defines the maximum number of color originals for each set of output devices. The maximum number of entries defined by max-color-index in the color lookup table of the output device. Max-device-aspect-ratio defines the maximum ratio of screen visible width to height of the output device. Max-device-height defines the maximum height at which the screen of the output device is visible. Max-device-width defines the maximum screen visible width of the output device. 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 contained in a monochrome frame buffer. Max-resolution defines the maximum resolution of the device. Max-width defines the maximum width of the visible area of the page in the output device. Min-aspect-ratio defines the minimum ratio of the width to height of the visible area of the page in the output device. Min-color defines the minimum number of color originals for each set of output devices. The minimum number of entries defined by min-color-index in the color lookup table of the output device. Min-device-aspect-ratio defines the minimum ratio of screen visible width to height of the output device. Min-device-width defines the minimum screen visible width of the output device. Min-device-height defines the minimum visible height of the screen of the output device. 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 0orientation, which defines whether the height of the visible area of the page in the output device is greater than or equal to the width. Resolution defines the resolution of the device. For example: 96dpi, 300dpi, 118dpcmscan define the scanning process of TV equipment. Width defines the width of the visible area of the page in the output device.

More Instanc

Example

Use the @ media query to make a responsive design:

@ media only screen and (max-width: 500px) {

.gridmenu {

Width:100%

}

.gridmain {

Width:100%

}

.gridright {

Width:100%

}

}

The above is all the contents of the article "how CSS3 implements media query". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.