Example Analysis of Media query in CSS3
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.
