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 the Meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This code Several parameter explanations:

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

• initial-scale: the initial scaling ratio ( The default setting is 1.0)

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

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

• user-scalable: whether the user can manually zoom (the default setting is no, because we do not want the user to zoom in and out of the page)

Preparation 2: Load compatible files JS

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

<!--[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]-->

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

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

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">

There is a better way of writing:

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Why is a chrome=1 added after this code, this Google Chrome Frame (Google Embedded BrowserFrameGCF), if some users have this chrome plug-in installed in their computers , which allows IE in the computer to use the Webkit engine and V8 engine for typesetting and calculation, no matter which version it is, which is extremely powerful. However, if the user does not install this plug-in, then this code will make IE use the highest document mode. Show effect. 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

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }}

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

Someone may find that there is a screen in the above code. What it 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:

@media (max-width: 960px){
    body{
        background: #ccc;
    }}

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

@media screen and (min-width:960px){
    body{
        background:orange;
    }}

We can also mix the above usage:

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }}

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 most often need to use, 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 a summary of some of its parameter usage explanations:

• 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: Detect whether the device is currently in landscape or portrait state.

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

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

• color: The 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 a negative number.

• 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: Detect whether the output device is a grid or a bitmap device.

The above is the detailed content of Summary of using CSS3 media queries. For more information, please follow other related articles on the PHP Chinese website!