Detailed introduction of CSS3 media queries for responsive layout

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

##allAll Media equipmentscreenColor screen: computer, tablet, smartphone...printPrinter, Print PreviewspeechOccurring device: screen reader..aural(Deprecated) Speech and braille(Deprecated) Braille Tactile Feedback Device for the Blindembossed (obsolete) handheld (Obsolete) Portable device: small phone..projection (Obsolete) Projection device: slideshow..tty (Deprecated) Media using a fixed-density letter grid: teletypewriters and terminals..tv (obsolete) TV type equipment: TV, Internet TV..

Media properties

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

Media Type	Description
	AudioSynthesizer
	Page Braille printer for the blind

##min- device-widthThe minimum visible width of the screen of the output devicemin-device-heightThe minimum visible height of the screen of the output deviceThe minimum visible area height of the page in the output devicemin-monochromeThe minimum number of monochrome originals contained per pixel in a monochrome frame buffermin-resolutionThe minimum resolution of the devicemin-widthThe minimum visible area width of the page in the output devicemonochromeIn a single color The number of monochrome originals per pixel in the frame buffer. If it is not a monochrome device, the value is equal to 0orientationWhether the height of the visible area of ​​the page in the output device is greater than or equal to the widthresolutionThe resolution of the device. Such as: 96dpi, scanScanning process of TV equipmentwidthThe width of the visible area of ​​the page in the output device

Media type	Description
aspect-ratio	The ratio of the width to height of the visible area of ​​the page in the output device
color	The number of color originals in each group of output devices. If it is not a color device, the value is equal to 0
color-index	The number of entries in the output device's color lookup table. If no color lookup table is used, the value is equal to 0
device-aspect-ratio	The ratio of the visible width of the screen to the height of the output device
device-height	The screen visible height of the output device
device-width	Output device The visible width of the screen
grid	Query whether the output device uses raster or lattice
height	The height of the visible area of ​​the page in the output device
max-aspect-ratio	The maximum ratio of the visible width and height of the screen of the output device
max-color	The maximum number of color originals in each group of the output device
max-color-index	Output The maximum number of entries in the device's color lookup table
max-device-aspect-ratio	The maximum ratio of the screen visible width to height of the output device
max-device-height	The maximum height visible on the screen of the output device
max-device-width	The maximum visible width of the screen of the output device
max-height	The maximum visible area height of the page in the output device
max-monochrome	The maximum number of monochrome originals contained per pixel in a monochrome frame buffer
max-resolution	Maximum device resolution
max-width	Maximum visible area width of the page in the output device
min-aspect-ratio	Minimum ratio of width to height of the visible area of ​​the page in the output device
min-color	The minimum number of color originals in each group of the output device
min-color-index	The minimum entry in the color lookup table of the output device Number
min-device-aspect-ratio	The minimum ratio of the visible width to height of the output device screen
min-height
	300dpi, 118dpcm

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!