Use our CSS3 to achieve Responsive layout

Just having a flexible box is not enough
CSS3 also extends the mediaattribute, adding A module function
Media QueriesMedia QueriesFunction

Introduction of media queries

With the rapid popularity of mobile terminals
More and more users use smart phones , tablets, etc.
All taking into account the needs of users
We need to ensure that users have a good experience browsing the page on various devices
So we need media queries
It allows us to provide Different devices or devices with different conditions set different styles
However, if the mobile terminal has very important needs
It is better to develop a special page for the mobile terminal
Let’s take a look at introducing media queries Method

Media query selectively loads files

First let’s take a look at the link method
This is the approach in CSS2
Use the link tag and media attribute to introduce different style sheets ( If the conditions are met)

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

Two concepts are introduced here
One is Media Type(Media Type), and the screen
here isMedia Features (Media Query), the max-width here: 600px

Media Query is an enhanced version of CSS3’s Media Type
In fact, Media Query can be regarded as Media Type (judgment condition) + CSS (qualified Style rules)

The translation of this code is
If the media medium is a screen type and the window width is ≤600px, introduce the demo.css style file

Media query to selectively add styles

What we do in CSS3 is to use @media rules to add different styles in CSS files
Compared with link, it can reduce page requests and have better results

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

Introduction of other media queries

There are many, many media queries, we don’t need to know so much
The only two commonly used ones are the above two
@import can also use media queries

@import url(demo.css) screen;

Use media queries

If we want to specify multiple media properties
Just use the and keyword directly
The specification of the media properties part requires the use of brackets

media="screen and (min-width: 601px) and (max-width: 800px)"

The style is applied to the screen between 601px~800px

Media queries do not have or specify alternative media capabilities, but we can use a comma separated list

media="screen and (min-width: 601px), print and (min-width: 6in)"

Styles are applied on screens 601px+ or printing devices that use paper at least 6 inches wide

Media queries can specify negative conditions
We need to use the keyword not at the front of the media statement
Note that it cannot be declared separately before a single condition, not will negate the entire media statement

media="not screen and (min-width: 600px) and (max-width: 800px)"

Style is applied to screens that are not between 600px~800px

In addition to the not keyword, there is also an only
It is used to hide media queries from early browsers
Similar to not, it must be declared at the beginning of the media declaration statement
For example, this statement

media="screen and (min-width: 601px) and (max-width: 800px)"

Early browsers can only understand it asmedia="screen"
Since it does not understand media properties, it will apply style rules to all screen devices
but uses the only keyword

media="only screen and (min-width: 601px) and (max-width: 800px)"

Early browsers will understand this as media="only "
But the only media type does not exist, so it will not apply any styles
Implements the function of hiding media queries from early browsers

Media types and media properties

Media Type

Although there are many keywords for media types, most of them have been abandoned (who uses them)
The commonly used ones are all, screen, and then print

Media properties

There are many media properties, and many of them are not used

Note here to distinguish device-width/height and width/height
device -width/height is the width of the device (not the width of the browser)
width/height is the size of our browser window
Use
documentElement.clientWidth/clientHeight is viewport The value of

The above is the detailed content of Detailed introduction of CSS3 media queries for responsive layout. For more information, please follow other related articles on the PHP Chinese website!