Summary of using CSS3 media queries

First of all, when using Media, we need to set the following code to be compatible with the display effect of mobile devices:

Preparation 1: Set Meta tag

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span style="color: #0000ff;">></span>

Explanation of several parameters of this code:

• width = device-width: The width is equal to the width of the current device

• initial-scale: Initial scaling (default setting is 1.0)

• minimum-scale: The minimum ratio the user is allowed to zoom to (default setting is 1.0)

• maximum-scale: The maximum ratio the user is allowed to zoom to (default setting is 1.0)

• user-scalable: Whether the user can manually zoom (default is set to no, because we don’t want users to zoom in and out of the page)

Preparation 2: Load compatible file JS

Because IE8 neither supports HTML5 nor CSS3 Media, we need to load two JS files to ensure that our code achieves compatibility:

<span style="color: #008000;"><!--</span><span style="color: #008000;">[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]</span><span style="color: #008000;">--></span>

Preparation 3: Set the default IE rendering mode to the highest (you can choose to add this part or not)

Nowadays, many people’s IE browsers have been upgraded to IE9 or above, so a lot of strange things happen at this time. For example, the browser is IE9 now, but the document mode of the browser is IE8:

In order to prevent this situation, we need the following code to make IE’s document mode always up to date:

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge"</span><span style="color: #0000ff;">></span>

There is a better way to write it:

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=Edge，chrome=1"</span><span style="color: #0000ff;">></span>

Why is there a chrome=1 added after this code? This Google Chrome Frame (Google Embedded Browser Framework GCF). If some users have this chrome plug-in installed in their computers, they can Regardless of which version IE is, you can use the Webkit engine and V8 engine for typesetting and calculation, which is extremely powerful. However, if the user does not install this plug-in, this code will make IE display the effect in the highest document mode. I still recommend that you use this code, but you can do it without it.

Enter CSS3 Media writing method:

Let’s take a look at the following code first. It is estimated that many people often see code similar to the following in responsive website CSS

<span style="color: #800000;">@media screen and (max-width: 960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
}</span>

This should be regarded as a standard way of writing a media. The above CSS code means: when the page is less than 960px, execute the CSS below it. There should be no big doubt about this.

Someone should find that there is a screen in the above code. What he means is to tell the device to use serif fonts when printing pages and use sans-serif fonts when displaying on the screen. But now I find that many websites will directly omit screen, because your website may not need to consider when users print, you can write directly like this:

<span style="color: #800000;">@media (max-width: 960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
}</span>

Then there is the code when the browser size is greater than 960px:

<span style="color: #800000;">@media screen and (min-width:960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;">orange</span>;
    }<span style="color: #800000;">
}</span>

We can also mix the above usage:

<span style="color: #800000;">@media screen and (min-width:960px) and (max-width:1200px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;">yellow</span>;
    }<span style="color: #800000;">
}</span>

The above code means to execute the following CSS when the page width is greater than 960px and less than 1200px.

Summary of all parameters of Media

The above are the three characteristics of media query that we need to use most, the writing methods of greater than, equal to, and less than. The full function of the media queryer is definitely more than these three functions. Here is the explanation of some of its parameter usage that I have summarized:

• width:Browser visible width.

• height: Browser visible height.

• device-width: The width of the device screen.

• device-height: The height of the device screen.

• orientation: Check whether the device is currently in landscape or portrait orientation.

• aspect-ratio: Detect the ratio of the browser's visible width and height. (Example: aspect-ratio:16/9)

• device-aspect-ratio: Detect the ratio of the width and height of the device.

• color: Number of digits to detect color. (For example: min-color:32 will detect whether the device has 32-bit color)

• color-index: Check the color in the device color index table, its value cannot be negative.

• monochrome: Detect the number of bits per pixel in the monochromatic frame buffer area. (This is too advanced, I guess we will rarely use it)

• resolution: Detect the resolution of the screen or printer. (For example: min-resolution:300dpi or min-resolution:118dpcm).

• grid: Check whether the output device is a grid or bitmap device.

Reposted from: 520UED