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

This article will explain in detail which syntax keywords are related to css3 media queries. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

The syntax keyword for css3 media queries is "@media," which allows you to set different media conditions for a page and apply styles accordingly; the basic syntax format is "@media type and| not| only(media feature) {CSS-Code;}"。

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

Media Queries is a new concept introduced in CSS3 that allows you to set different media conditions for a page and apply styles based on those conditions.

The syntax keyword for css3 media queries is "@media."

@media can be styled differently for different screen size, especially if you need to design responsive pages.@media is useful.

When you resize the browser, the page will also re-render based on the browser width and height.

Grammar:

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

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

1）and

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

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

The result of a media query is a Boolean value: either true or false. The entire media query statement results in true only if all parts of the and join are true.

Media queries can also be viewed as queries to the browser. The media query above will first ask,"Are you a monitor? If the browser answers "yes," it continues to ask,"Is your minimum width 700 pixels? If the browser answers "yes," then go ahead and ask,"Is your screen in landscape orientation? "。Only when all three questions are answered yes does the entire media query result in 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)

It is valid only for color display devices and is invalid for any other device. 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))

All devices except monochrome display devices are represented. It is equivalent to:

not (screen and (monochrome))

Instead of:

(not screen) and (monochrome)

In addition to a single query, you can 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 operators in one query do not affect other media queries. Thus, the media query list can be applied to different media types and media attributes. For example:

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

The media query list above contains two media queries. For any device with a minimum width of 700 pixels, or a handheld device with a landscape screen, the media query list results in true, and otherwise 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 and choose to load different CSS code; the other is to use the media attribute of the tag and choose to load different style sheet files.

Set media query

1) Use @media rule

Using @media rules, you define different styles in the same CSS file according to different media conditions. When a user browses a web page, the browser chooses which CSS code to apply based on the results of the media query.

The syntax for @media rules is followed by @media, followed by media type and media properties, followed by a pair of braces defining the corresponding style rules in braces. For example:

@media screen and (max-device-width: 480px) { /* if device width

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.