What are the syntax keywords for css3 media queries

The syntax keyword of css3 media query is "@media", which allows setting different media conditions for the page and applying corresponding styles according to the conditions; the basic syntax format is "@media mediatype and|not| only(media feature) {CSS-Code;}".

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

Media Queries (Media Queries) is a new concept proposed in CSS3, which allows setting different media conditions for the page and applying corresponding styles according to the conditions.

The syntax keyword of css3 media query is "@media".

@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.

Syntax:

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

only is used to limit the entire query result, not is used to negate the entire query result. If you use the keywords not or only, a media type must be explicitly specified, and the keyword must be at the beginning of the entire media query statement.

1) and

The keyword and is used to combine expressions of media types and multiple media characteristics into the same media query. The query result is true only if the media type and the result of each expression are true. For example:

screen and (min-width: 700px) and (orientation: landscape)

The result of the media query is a Boolean value: either true or false. Only when all parts of the and connection are true, the result of the entire media query statement is true.

Media queries can also be thought of as questions to the browser. The above media query will first ask "Are you a monitor?". If the browser answers "Yes", it will continue to ask "Is your minimum width 700 pixels?". If the browser answers "Yes", it will continue to ask " Is your screen in landscape orientation?". Only when the answers to all three questions are "yes", the result of the entire media query statement will be true.

2) only

The keyword only is used to limit the scope, which will apply to the entire query result. For example:

only screen and (color)

is only valid for color display devices, and is invalid for any other devices. It is equivalent to:

not (screen and (color))

3) not

The keyword not is used to negate the entire query result. For example:

not (screen and (monochrome))

means all devices except monochrome display devices. It is equivalent to:

not (screen and (monochrome))

instead of:

(not screen) and (monochrome)

In addition to a single query, it is also possible to define a list of media queries separated by commas. If the result of any media query in the list is true, the result of the media query list is true; otherwise, the result of the media query list is false.

Each query in the media query list is independent of each other, and the operators in one query do not affect other media queries. Therefore, media query lists can operate on different media types and media properties. For example:

(min-width: 700px), handheld and (orientation: landscape)

The above media query list contains two media queries. For any device with a minimum width of 700 pixels, or a handheld device with a horizontal screen, the result of the media query list is true, and in other cases, it is false. .

With media queries, you can use them to build responsive layouts. There are two ways to use media queries: one is to use the @media rule to choose to load different CSS codes; the other is to use the media attribute of the tag to choose to load different style sheet files.

Set media queries

1) Use @media rules

Use @media rules, In the same CSS file, define different styles according to different media conditions. When a user browses a web page, the browser will choose which piece of CSS code to apply based on the results of the media query.

The syntax of the @media rule is after @media, followed by the media type and media characteristics, and then a pair of braces in which the corresponding style rules are defined. For example:

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

According to the cascading nature of styles, the style defined later in the style sheet will overwrite the same style previously. Therefore, you can define basic styles at the beginning of the style sheet to adapt to all designs, and then use media queries to rewrite the corresponding parts so that different media conditions apply different style rules.

2) Use the media attribute of the tag

When using the media attribute of the tag, define different styles for different media conditions table file, the browser will load different style sheet files based on the results of the media query.

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

Three style sheet files reset.css, phone.css, and screen.css are defined here, and reset.css is loaded on all display devices to allow display devices with a viewport width less than 480px. Load phone.css and allow display devices with a viewport width greater than 768px to load screen.css.

It can be seen that using the first method, you need to write @media several times in the same CSS file; using the second method, you need to write the tag several times. Both methods have the same effect, you can choose the method you like.

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

@import url("small.css") screen and (max-width: 360px);

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单，只需在页面所有的CSS之后，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

（学习视频分享：css视频教程）

The above is the detailed content of What are the syntax keywords for css3 media queries. For more information, please follow other related articles on the PHP Chinese website!