Media queries in CSS3

Media queries are used in responsive web pages.

1. Initialize the settings:

In the HTML file, insert a word in the top

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

The phrase is to make an initialization setting for the responsive Web page, which mainly includes:

Name= "Viewport": Mark the display device as the viewport;

width = device-width: Widths equal to the width of the current device;

Initial-scale: Initial zoom ratio (default = 1.0);
Minimum-scale: The minimum scale that the user is allowed to zoom to (the default setting is 1.0);
Maximum-scale: The maximum scale that the user is allowed to zoom to (the default setting is 1.0);
User-scalable: Whether the user can scale manually (the default is no, because we don't want the user to zoom out of the page).

2. Solve the compatibility problem of IE browser:

Because Internet Explorer (IE8) does not support media in HTML5 and CSS3, you need to load the JS file for the Internet Explorer compatibility issue:

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

The SRC attribute in the two <script></script> tags points to a file with a fixed address, and a direct offsite reference is not necessary to download to a local reference.

3. Set IE to the highest rendering mode:

Now there are many people's IE browser upgrade to IE9 above, this time there will be a lot of weird things happen, such as now IE9 browser, but the browser's document mode is IE8, in order to prevent this situation, we need the following code to make IE's document mode is always up-to-date:

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

There is, of course, a more helpful notation:

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >

This code is followed by a chrome=1, this is due to Google Chrome frame (Google embedded browser framework GCF), if the user's computer installed this Chrome plug-in, the computer's Internet Explorer to circumvent the version factor, Use WebKit engine and V8 engine for typesetting and operation. Of course, if the user does not install the plugin, this code will let IE browser in the highest document mode to show the effect.

4.CSS3 Media Query:

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

This is a media standard notation, in the CSS file, meaning: When the page is less than 960px execution of the following CSS code, the specific content is not tube.

For screen in the code above, the serif font is used when the device is told to print the page, and the line font is used when the display is displayed. At present, many websites will directly omit screen, so do not need to consider the needs of users to print Web pages, so there is this writing:

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

In the principle of rigorous thinking, individuals will not use this type of writing.
5.CSS3 Media Query Body code combination:

The use of media query code combinations in responsive web layouts, primarily to determine the width of the fit screen, and to apply different CSS styles based on various width conditions.

If the screen width is equal to 960px, turn the page background color to red:

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

If the screen width is up to 960px (less than 960px), turn the page background color to black:

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

If the screen width is at least 960px (greater than 960px), turn the background color of the Web page to Orange:

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

It's more common to mix, such as when the screen width is between 960px and 1200px, the background color of the Web page turns yellow:

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

6. Overall development ideas:

The general idea of using CSS3 Media query is to judge the width of the Web page in different devices, such a range of three kinds (PC, tablet, mobile phone), there may be four (PC, tablet, large screen mobile phone, small screen mobile phone), of course, it may only need two kinds (tablet, cell phone, The PC side can not be used as the object of CSS3 media query when developing a separate version, and apply different CSS styles for the required page elements in various width ranges to fit various devices.

7. Width issues in responsive web development:

In real-world development, it is often necessary to set the maximum width of the responsive Web page, and once the maximum width is ignored, bloated or fragmented page layouts can cause visual flooding, which we often say looks low.
Also talk about the current display device in the width of the Web page (due to the length of the problem, not from the beginning of the Industrial Revolution), the most common width is basically: 960px or greater than the PC side (1920px, 1600px, 1440px, 1280px, 1140px, 960px) , 960px to 640px between the plate end (768px, 640px) and the phone end of 640px (480px, 320px), the above width has been long, and the display device page width will be in this state for a long time, in the responsive page width design, It is sufficient to consider the basic size from these several dimensions.
8.media Media Query All parameters Summary:

The Media Finder also contains the relevant features that are not commonly used, as shown below:

• Width: Browser viewable width,

• Height: Browser visual height,

• Device-width: The width of the device screen,

• Device-height: Height of the device screen,

• Orientation: Testing equipment is currently in the horizontal or vertical state,

• Aspect-ratio: Detects the ratio of the browser's visible width and height (for example: ASPECT-RATIO:16/9),

• Device-aspect-ratio: Measuring the ratio of the width and height of the device,

• Color: Detects the number of bits of color (for example: MIN-COLOR:32 will detect if the device has a 32-bit color),

• Color-index: Check the color of the Device Color Index table (his value cannot be a negative number),

• Monochrome: Detects the number of bits per pixel in a single-color Ligustrum buffer area (this is too high, it is estimated that we seldom use it),

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

• Grid: Whether the device that detects the output is a grid or a bitmap device.

9. Extension--There are also media queries in CSS2:

Media query is not a dedicated feature after the birth of CSS3, and media has been supported since CSS2, such as:

Write this sentence in the

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

The above is the liner usage implemented by CSS2, and the href attribute is written to a CSS file linked in a single display device, but only for getting started,

To determine whether a mobile device is a portrait-placed display, you can write:

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

To have a page less than 960px execute a specified CSS style file, you can write:

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

Of course, CSS2 Media Query method is not recommended to use, the biggest drawback is that it will increase the number of page HTTP requests, increase the burden of the page, using CSS3 Media query is the best way to do so.