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

This article will explain in detail the sample analysis of media queries in CSS3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Media inquiry

Media query in CSS3, which can invoke different styles according to the size of the user's device. It is a simple and effective way to provide different content to different devices, and the most common query is to handle the height and width of viewports.

Media queries can be used for the following:

(1) apply styles conditionally using CSS@media and at-rules.

(2) specific media, as well as other HTML elements.

(3) the methods of Window.matchMedia () and JavaScript are used to test and monitor media status.

Media Typ

All: applies to all devices.

Print: suitable for paging materials and documents viewed on screen in print preview mode.

Screen: mainly suitable for screen.

Speech: mainly suitable for speech synthesizer.

Media function

Due to the problem of space, only part of the media query function is shown to you.

Name description

Width visualization width

High visualization degree of height

Aspect ratio of aspect-ratio Viewport

Orientation of the orientation viewport

Pixel density of resolution output device

Prefers-reduced-transparency Transparency Settin

Whether the grid device uses a grid or bitmap screen

How often the update output device modifies the appearance of the content

How the overflow-block output device handles the contents of overflowing viewports along the block axis

Overflow-inline can scroll to overflow the contents of the viewport along the inner axis

Example:

You can use the and keyword to combine media functions with media types or with other media features, such as limiting styles to horizontal devices with a width of at least 30em length

Media (min-width:30em) and (orientation:landscape) {...}

Example:

@ media (max-width:960px) {body {background:pink;}}

The above example shows that the page will turn pink when the page is less than 960px

Max-width: represents the maximum width, and when it is less than this width, the following function is called

This is the end of the article on "sample Analysis of Media query in CSS3". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.