Home > Article > Web Front-end > What is the html5 media query statement?
html5 media query statement is composed of a media type and one or more conditional expressions for detecting media characteristics; the media characteristics that can be used for detection in media queries include width, height, color, etc.; using media queries, you can Customize the display effect for specific output devices without changing the page content.
The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer
What is the html5 media query statement?
HTML5 Media Queries
- What are media queries?
Media queries allow us to set CSS styles for the device display based on its characteristics (such as viewport width, screen ratio, device orientation: landscape or portrait). Media queries consist of the media type and one or more detections Media properties are composed of conditional expressions. Media properties that can be detected in media queries are width , height , and color (etc.). Using media queries, you can customize the display effect for specific output devices without changing the page content.
- Applicability of media queries and flexible box layout
Media queries: It is best to use media queries when the structure of the page changes. Flexible box: If only the width and height change, try to use the flexible box
-Usage method
<!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(min-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style> @media (max-width: 600px) { .class { display: none; } } </style>
@media media type and (media characteristics) {your style}
To use Media Queries, you must start with "@media", then specify the media type (also called device type), and then specify the media characteristics (also called device characteristics). The writing method of media properties is very similar to the writing method of styles. It is mainly divided into two parts. The first part refers to the media properties, and the second part is the value specified by the media properties, and a colon is used between the two parts. Separate. For example:
(max-width: 480px)
Different from CSS attributes, media properties use min/max to express greater than equal to or less than as a logical judgment, instead of using less than (<) and greater than (>). judge by symbols.
-Media Type
all | ##All media (default) |
---|---|
screen | Color screen |
Print Preview |
width | (can add max min prefix) |
---|---|
height | ##(can add max min prefix)|
(can add max min prefix) | |
##portrait vertical screen/landscape horizontal screen |
The above is the detailed content of What is the html5 media query statement?. For more information, please follow other related articles on the PHP Chinese website!