How to Use the CSS3 media queryer

How to Use the CSS3 media queryer

In recent years, with the development of responsive layout and multiple times of use, the demand for responsive websites with adaptive screens is growing. But how can we make the website adaptive to the screen? Here we need to mention a new technology in css3-media queryer.

So what is the media queryer?

Media queryer is a new screen resolution technology added by CSS3 to detect terminals that open websites.

The Media queryer is used in the following ways:

1. Set a meta tag, for example:

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

Description of related parameters:

Device-width:Defines the screen width of the output device.

　　Device-height:Specifies the screen height of the output device.

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

Initial-scale:The initial scaling ratio (1.0 by default ).

Minimum-scale:The minimum scale allowed by the user (1.0 by default ).

Maximum-scale:The maximum allowed Scale (1.0 by default ).

User-scalable:Whether the user can zoom in or out manually (no by default, because we do not want the user to zoom in or out the page ).

2. Load compatible file js

Why load compatible file js?

Because IE8 and later kernels are incompatible with html5 and CSS3 media. Therefore, we need to load two compatible files so that our code can be implemented.

1 <!--[if lt IE 9]>2 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>3      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>4 <![endif]-->

You can also download html5hiv. js and respond by yourself. js only needs to modify the src path in the corresponding script when using it.

3. Adjust the rendering method of IE to the maximum. The majority of Internet Explorer versions are later than 9. The IE document mode of this version is not the latest, or many friends do not pay attention to this, therefore, you can use the following code to maintain the latest version of the IE document mode:

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

Method 2:

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

Install a Google chrome frame plug-in. This allows all browsers to useWebkitEngine andV8If this plug-in is not installed, the code above will display the best file mode in the browser.

Standard CSS3 media writing:

For example, when the page is smaller than 960px, execute the CSS code below it.

1 @media screen and (max-width: 960px){3     body{5         background: #000;7      }9 }

This Code contains a screen, which means that the device uses a linefeed when printing the page.

CSS2 Media usage

In fact, not only CSS3 supports Media usage, as early as CSS2 has supported Media. The specific usage is to insert the following code into the head tag of the HTML page:

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

If you want to know whether the current mobile device is a portrait display, you can write as follows:

1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

The code in the first section is also implemented using CSS2, so that it can execute the specified style file with the page width less than 960:

1 <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

However, this method increases the number of http accesses. Therefore, writing all CSS together with CSS3 is the most OK.

OK. Now we will go back to the media usage of CSS3. We have discussed how to use CSS3 to write the size of the screen width smaller than 960px. Now let's write the method that is equal to 960px:

1 @media screen and （max-width-device：960px）{2 3 Body{4 5        Background：blue；6 7 }8 9 }

 

Description:

1 @media screen and(min-width:960px){2 3        Body{4 5               Background:red;6 7 }8 9 }

 

The previous section describes several commonly used methods. Next, we will summarize CSS3 media:

Width: Visible width of the browser.

Height: Visible height of the browser.

Device-width: The width of the device screen.

Device-height:The height of the device screen.

Orientation: Check whether the device is in the vertical or horizontal status.

Aspect-ratio: Check the ratio of the visible width and height of the browser. (For example, aspect-ratio: 16/9)

Device-aspect-ratio: Ratio of the width and height of the device.

Color: The number of digits of the color. (For example, min-color: 32 checks whether the device has a 32-bit color)

Color-index: Check the color of the device color index table. Its value cannot be negative.

Monochrome: Detects the number of bits in each pixel in the monochrome swap buffer area. (This is too advanced, so we probably seldom use it)

Resolution: Detects the resolution of the screen or printer. (For example, min-resolution: 300dpi or min-resolution: 118 dpcm ).

Grid: Checks whether the output device is a grid device or a bitmap device.

Finally, end with a fun Demo:

1 <! DOCTYPE html> 2 
If this article is inappropriate, please correct me. Thank you!