Example Analysis of Multimedia query in CSS3

Editor to share with you the example analysis of multimedia queries in CSS3, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

CSS2 multimedia query:

The @ media rule is described in css2, and different style rules can be customized for different media types (including monitors, portable devices, televisions, etc.).

CSS3 multimedia query:

CSS3 multimedia query inherits all the ideas of CSS2 multimedia type, instead of finding the type of device, CSS3 displays adaptively according to the setting.

Multimedia queries can check many things: the width and height of the viewport (view), the width and height of the device, orientation, resolution.

Query syntax:

@ medianot | only | allmediatypeand (expressions) {css-sode;}

Not: exclude certain types of devices, only: only certain types of devices, all: all devices.

You can use different style files on different media:

Media type:

All all Media

Print printer

Screen computers, tablets, mobile phones

Speech screen reader

Media features:

Device-width/height: width / height visible on the device screen

Height,width: the height and width of the visible area of the page

Max-device-width/height: the maximum width and height visible on the screen.

The above is all the contents of the article "sample Analysis of Multimedia queries in CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!