Media Enquiry-Comprehensive Learning

Before always thought, the media query is very simple, a few queries and then give a separate style OK, but when the actual solution to its problems, seems to be a bit difficult, so today specifically to comprehensive learning and record.

First of all,css2 media query and CSS3 have a difference, I say here seems to have a problem, CSS2 should be called media query, what is media query, such as:

1 <  rel= "stylesheet"<span style= "color: #ff0000;" > media= "screen"</span> href= "small.css"/>

The media= "screen" here is whether the query is a computer or a printer or a TV, the media type table is as follows:

The SMALL.CSS is used when the current media satisfies the situation, but if it is not satisfied, the HTTP request for the link is still there, meaning that the browser still downloads the small.css but is not used. (There is a picture of the truth)

The above is CSS2 media query, only for understanding, because it seems that a knowledge point of learning must be compared to remember deep, remember understand.

Next say CSS3 media query (IE8 does not support media queries, often we add respond.js conditional judgment)

PS: This is a very useful statement.

<name= "Viewport"  content= "Width=device-width, initial-scale=1, User-scalable=no ">

CSS3 Media query statements are completely written in the CSS stylesheet, as in the form of:

1 @media screen and (min-width:541px) and (max-width:720px) {2html {font-size: 1400%;} 3 }

Here is a description of what parameters @media can take. The media screen here is the same as the CSS2 media query, judging the device.

Common:

Width : The viewable width of the browser.

Height: The viewable height of the browser.

device-width: The width of the device screen.

device-height: The height of the device screen.

Device-pixel-ratio: Screen pixel ratio

Orientation: The test equipment is currently in the horizontal or vertical state.

aspect-ratio: Detects the scale of the browser's visible width and height. (Example: ASPECT-RATIO:16/9)

device-aspect-ratio: Detects the ratio of the width and height of the device.

Color: detects the number of digits of the color. (ex: MIN-COLOR:32 will detect if the device has 32-bit color)

color-index: Check the color in the Device Color Index table, his value cannot be negative.

Resolution: Detects the resolution of the screen or printer. (For example: min-resolution:300dpi or MIN-RESOLUTION:118DPCM).

Connection keywords can be and, or, not.

For example:

1 /*pixel ratio is 1 o'clock, the head color is green*/2 . Header{background:Red;Display:Block;}or3 @media only screen and (-moz-min-device-pixel-ratio:1),4 5 Only screen and (-o-min-device-pixel-ratio:1),6 7 Only screen and (-webkit-min-device-pixel-ratio:1),8 9 Only screen and (min-device-pixel-ratio:1){Ten . Header{background:Green;} One  A }

Writing is that way, more specific to find instances, such as mobile page of the font is certainly not written dead ah, such as a lot of tags a,p,h1, and so on, you can not use the media query each go to write again, I think the media query to use a combination of units, such as EM units, REM units, but also need to constantly learn , today is just finishing, resources will be listed below, or very helpful.

CSS3 Media Query:

Create a responsive web site using CSS media queries

CSS3 Media Queries

CSS3 Media queries for web responsive layouts

CSS3 Media Finder Usage Summary

CSS Media Query

Rem,em Unit:

CSS3 rem Setting font size

Also attached is a meaningful EM reference table

If you think this article is helpful to you, just praise it!

This article is from my blog: Media Enquiry-Comprehensive Learning

Media Enquiry-Comprehensive Learning