Media Enquiry of CSS3 (May 31, 2015)

First, what is the media query

Media queries are a way to provide different styles for different devices, providing the best experience for each type of user and the implementation of responsive design.

Nowadays, more mobile phones and tablets are being asked every day. Consumers have the ability to imagine a variety of specifications and shapes, but web developers face a challenge: how to make their websites look good on traditional browsers, mobile phones, and tablet browsers, and how to provide a first-class user experience on screens of all sizes, the answer is: responsive design. Responsive design can vary depending on the screen size displayed. The main way to implement responsive design is to use CSS media queries.

Second, the media query rules

1. Introduction method

<!--1, CSS Media query in link element--

<link rel= "stylesheet" media= "(max-width:800px)" href= "Example.css"/>

<!--2, CSS Media query in style sheets--

<style>

@media (max-width:600px) {

. facet_sidebar {

Display:none;

}

}

</style>

2. Related rules

Media queries contain a media type and media properties that contain one or more expressions, as described in the CSS3 specification, that are parsed into true or false. If the media type in the media query matches the device that the document is showing, the query result is true and all expressions in the media query are true.

@media (min-width:800px) {...}

Medium type: media;

Media properties (expression): min-width:800px; Indicates a minimum width of 800px, if the minimum width of the browser is 800px, use {...} The Styles in

@media (min-width:800px) and (max-width:1200px) {...} It means: Apply {...} at a minimum width of 800px and a maximum width of 1200px The Styles in

Third, media query syntax

1. Logical operators

operator not, and, or, only can be used to construct complex media queries.

The AND operator is used to combine multiple media attributes and merge them into the same media query. The result of this query is true only if each property is true.

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) {...}

Indicates that the media query applies {...} only if the minimum width is 800px, the maximum width is 1200px, and the orientation is vertical. The Styles in

The OR operator is used to combine multiple media properties, so that if one of the media properties is true, the entire query result is true

@media (min-width:800px) or (orientation:portrait) {...}

Indicates that the media query uses the {...} when the minimum width is 800px or the orientation is portrait-oriented. The Styles in

The NOT operator is used to negate the results of a media query.

Not at the beginning of a media query, not ignoring the result. In other words, if the query is true without the NOT keyword, now it will be false

@media (not min-width:800px) {...}

Indicates that when the minimum width is not 800px, the {...} is used. The Styles in

The only operator indicates that the specified style is applied only if the media query match succeeds. It allows the selected style to not be applied in an older browser.

If the not or only operator is used, you must explicitly specify a media type.

You can also put multiple media queries together with commas, and as long as any one of them is true, the entire media statement returns to true. Equivalent to or operator.

@media (min-width:800px), (orientation:portrait) {...}

Indicates that the media query uses the {...} when the minimum width is 800px or the orientation is portrait-oriented. The Styles in

2. Media properties

3. Media type

In the JetBrains webstorm 10.0.2 input @media will have the following information, check the information before you know this is the media type

四、一个 Ultra-Simple Demo

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
/*
       Page background is blue when page visible width is greater than 800px
        */
@media screen and (min-width:800px) {
body{
Background-color:blue;
            }
        }
/*
        Page visible width small Wu 800px, the page background is red
        */
@media screen and (max-width:800px) {
body{
background-color:red;
           }
       }
</style>
<body>

</body>
Effect:
After narrowing the browser window
V. Use of feelings
Advantage: Using media query can make different styles for different devices, make the page effect on each device visual effect is good, improve the user experience.
Disadvantage: You need to write different CSS styles for different devices, which increases the complexity of the development.
Recommended: Bootstrap, Amaze UI and other excellent open-source front-end framework
Media Enquiry of CSS3 (May 31, 2015)