Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Example Analysis of Multimedia query in CSS3

2025-04-09 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

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!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report