CSS: Create a responsive layout using CSS media queries-McBye

CSS: Create a responsive layout using CSS media queries-McBye is now in the Web Front-end field, and BootStrap is the most popular UI library, its 12-column fence system provides a responsive layout that is very good for programmers.

The inherent principle of Bootstrap is to use media queries to select Css styles in different scenarios caused by different screen sizes, resolutions, and devices. Today, I will summarize the media query tool or method.

From CSS version 2, you can obtain media support in CSS by media type.

1. How to use media queries:

The above two statements introduce Css style sheets. A keyword "media" is added to the general Css introduction statement, and the media attribute defines a style sheet that should be used to specify each media type:

• screenApplicable to computer color screens.
• printThis function is applicable to the content viewed in preview mode or printed by the printer.

* The media attribute is placed in the statements introduced by Css. Therefore, screen or print can be omitted in the following query statements.

2. General media query syntax:

@ Media "media type" condition {/* CSS style sheet */}

"@ Media" can also be written in another way, "media = ";

"Media type" is the media type used for media queries. For example, "all" means that all media use the following css style sheet; or "(min-width: 800px )", this means that the following CSS style sheet is used when the minimum screen width is PX. If the screen width is greater than PX, this CSS will not be applied.

That is, a media query contains a media type followed by one or more expressions that check specific conditions (such as the Minimum screen width. If the true or false condition is evaluated, Css is applied if the condition is set to true. Otherwise, Css is not applied.

As a result, we can expand many media query types.

3. Three logical operations can be used in Css media queries, namely, "and", "or", and "not". Of course, I do not need to explain them. Let's take a few examples to understand at a Glance:

/* When a media query is applied to all media types, all */@ media (min-width: 800px) {...}/* is omitted, and the width is 800 ~ When between pixels, activate */@ media (min-width: 800px) and (max-width: pixel px ){...} /* multiple and operators can be used. The third vertical direction is added here. */@ media (min-width: 800px) and (max-width: Limit px) and (orientation: portrait ){...} /* activation when the width is 800px or the direction is portrait */@ media (min-width: 800px) or (orientation: portrait ){...} /* activate if the width is not 800px */@ media (not min-width: 800px ){...}

4. The width and height are very similar, so the two conditions can be used together:

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

Orientation query:

@media (orientation:portrait) { ... }

Queries without max-or min-are of course not highly available:

@media (width:800px) and (height:400px) { ... }

5. Common media queries

Because Apple first launched users' smartphones and tablets to the market, most of the following media queries are based on these models.

If the target is a horizontal-mode smartphone, use:@media (min-width: 321px) { ... }

If the target is a portrait smartphone, use:@media (max-width: 320px) { ... }

If the target is a horizontal mode Apple iPad, use:@media (orientation: landscape) { ... }

If the target is an iPad in portrait mode, use:@media (orientation: portrait) { ... }

You may have noticed that the iPad usesorientationMedia features, whilewidthUsed on the Apple iPhone. This is mainly because the iPhone does not supportorientationMedia features. You must usewidthSimulate breakpoints in these directions.

6. nested media query:

#header {  width: 400px;  @media (min-width: 800px) {    width: 100%;  }}

The above code is compiled as follows:

#header {  width: 400px;}@media (min-width: 800px) {  #header {    width: 100%;  }}

The preceding section uses the width as an example to summarize media queries. Width and height are only two types of attributes that can be controlled by media queries, including color, color index, and ratio) and other attributes can also be used.