A detailed description of the CSS3 media Queries for responsive layouts

Use our CSS3 to implement responsive layouts

Just the elastic box is not enough
The CSS3 also expands the media properties, adding a module function
Media Queries query function

Media Query Introduction

With the rapid popularization of mobile terminals
More and more users browse pages using smartphones, tablets, and more
All taking into account the needs of users
We want to ensure that users have a good experience on all kinds of devices.
So we need media inquiries.
It allows us to set different styles for different devices or devices of different conditions.
But if the mobile side has a very important need
Or should be developed specifically for the mobile side of the page is better
Let's take a look at how to introduce media queries

Media Query Selective load file

First, we'll look at the link method
This is the way of CSS2.
Introduce different style sheets with link tags and media attributes (if conditions are met)

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

Two concepts are introduced here
One is the media type , where the screen
One is the media Query, where the max-width:600px

Media query is an enhanced version of CSS3 for media type
You can actually think of media query as a media Type (judging condition) +CSS (criteria-compliant style rule)

This code is translated
If media media is screen type and the window width is ≤600px, the Demo.css style file is introduced

Media Query optional Add style

Our practice in CSS3 is to add different styles in the CSS file using the @media rule
Compared to link, it can reduce the page request, the effect is better

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

Other media queries introduced

There's a lot of media queries, and we don't need to know that much.
Only two of the above are commonly used
@import can also use media queries

@import URL (demo.css) screen;

Media query Use

If we want to specify multiple media features
Use the AND keyword directly
The Media Properties section specifies that parentheses are required

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

Styles applied to the screen between 601px~800px

Media queries do not have or specify alternate media features, but we can use a comma-delimited list

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

Styles apply to a 601px+ screen or a printing device that uses at least 6 inch wide paper

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

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

Styles applied to screens that are not between 600px~800px

In addition to the NOT keyword, there is a
It is used to hide media queries from earlier browsers
Similar to not, must be declared at the front of the media declaration statement
Like this statement.

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

Early browsers, only to interpret it as media="screen"
Because it does not understand media features, it applies style rules to all screen devices
But using the only keyword

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

Early browsers will interpret it as media="only"
But there is no only media type, so it does not apply any style
Enables the ability to hide media queries from an earlier browser

Media types and media features

Media type

The media type of keywords although many, but most of them are discarded (who use AH)
Commonly used is all, screen, and then print

Media Type	Description
All	All media devices
Screen	Color screen: computer, tablet, smart machine.
Print	Printer, print preview
Speech	occurred device: Screen reader.
Aural	(deprecated) voice and audio synthesizer
Braille	(obsolete) using Braille tactile feedback devices for the blind
Embossed	Braille Printer for blind people (obsolete)
Handheld	(OBSOLETE) Portable device: Small phone.
Projection	(deprecated) Projection device: Slide show.
Tty	(deprecated) Media using fixed density letter grids: telex typewriters and terminals.
Tv	(obsolete) TV type device: TV, Internet TV.

Media features

There are so many media features that you can't use

Media Type	Description
Aspect-ratio	Ratio of width to height of page visible area in output device
Color	The number of color originals for each set of output devices. If it is not a color device, the value is equal to 0
Color-index	The number of entries in the Color query table for the output device. If no color query table is used, the value is equal to 0
Device-aspect-ratio	The ratio of the screen visible width to the height of the output device
Device-height	Screen visible height of output device
Device-width	The screen visible width of the output device
Grid	Query output device whether raster or dot matrix is used
Height	The height of the page visible area in the output device
Max-aspect-ratio	Maximum ratio of screen visible width to height of the output device
Max-color	Maximum number of color originals per set of output devices
Max-color-index	Maximum number of entries in a color query table for an output device
Max-device-aspect-ratio	Maximum ratio of screen visible width to height of the output device
Max-device-height	Maximum screen visible height of the output device
Max-device-width	Maximum visible width of the output device's screen
Max-height	Maximum visible area height of the page in the output device
Max-monochrome	The maximum number of monochrome originals per pixel in a single-color 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 page visible area in output device
Min-color	Minimum number of color originals for each set of output devices
Min-color-index	The minimum number of entries in the Color query table of the output device
Min-device-aspect-ratio	Minimum ratio of visible width to height of output device screen
Min-device-width	Minimum visible screen width of the output device
Min-device-height	Minimum visible height of the output device's screen
Min-height	The minimum visible area height of the page in the output device
Min-monochrome	The minimum number of monochrome originals per pixel in a single-color frame buffer
Min-resolution	Minimum resolution of the device
Min-width	The minimum visible area width of the page in the output device
Monochrome	The number of monochrome originals that are contained in a single-color frame buffer per pixel. If it is not a monochrome device, the value is equal to 0
Orientation	Whether the height of the page visible area in the output device is greater than or equal to width
Resolution	The resolution of the device. such as: 96dpi, 300dpi, 118DPCM
Scan	Scanning procedure for television equipment
Width	Width of the page visible area in the output device

Note here the distinction between 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 that is the value of viewport