Is media query a new attribute in css3?

Media query is a new feature of CSS3, which can be used for responsive design of the page; using "@media" query, it can be used to define failed styles for different media types, and can also be used for different screens. Size style sets different styles, the syntax is "@media [media medium] and|or (condition) and|or (condition){style}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

Is media query a new attribute of css3?

1. Media query is a new feature of css3, which can be used for responsive design of the page.

2. You can design multiple sets of different styles for different screens and different resolutions.

Media Query Syntax

@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}

Using @media queries, you can define different styles for different media types.

@media can set different styles for different screen sizes, especially if you need to set up a responsive page, @media is very useful.

When you reset the browser size, the page will also be re-rendered based on the width and height of the browser.

CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not, and, and only can be used to jointly construct complex media queries, and you can also combine multiple media queries into a single rule by separating them with commas.

not, only and and keyword meaning:

• not: The not operator is used to negate media queries. If this condition is not met, it returns true, otherwise it returns false. . If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify the media type.

• only: The only operator is used to apply a style only if the entire query matches, and is useful for preventing older browsers from applying the selected style. When only is not used, older browsers will simply interpret screen and (max-width: 500px) as screen, ignore the rest of the query, and apply its styles to all screens. If you use the only operator, you must also specify the media type.

• , (comma) The comma is used to combine multiple media queries into a single rule. Each query in the comma-separated list is processed separately from other queries. Therefore, if any query in the list is true, the entire media statement returns true. In other words, the list behaves like the logical or operator.

• and: The and operator is used to combine multiple media query rules into a single media query. When each query rule is true, the media query is true. It also Used to combine media functions with media types.

Media types describe general categories of devices. Unless the not or only logical operators are used, the media type is optional and the all type is (implicitly) applied.

You can also use different style files for different media:

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Is media query a new attribute in css3?. For more information, please follow other related articles on the PHP Chinese website!