media media queries in CSS3

Media queries are mostly used in responsive web pages.

1. Initialization settings:

In the HTML file, insert a sentence in the tag at the top of the webpage:

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

This sentence is to make an initialization setting for the responsive webpage, which mainly includes:

name="viewport": mark the display device as the viewport;

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

initial-scale: the initial scaling ratio (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 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 1.0) no, because we don't want users to zoom in or out of the page).

2. Solve the compatibility problem of IE browser:

Because IE browser (IE8) does not support media in HTML5 and CSS3, the JS file used to solve the compatibility problem of IE browser must be loaded:

<!--[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 file link address pointed to by the src attribute in the two <script></script> tags is the file at the fixed address. It can be referenced directly from another location without downloading to local reference.

3. Set the rendering mode of IE to the highest:

Nowadays, many people’s IE browsers have been upgraded to IE9 or above. At this time, many strange things will happen. For example, it is IE9 browser now, but the browser’s The document mode 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">

Of course there is a more powerful way of writing:

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

A chrome=1 is added after this code. This is due to Google Chrome Frame (Google Embedded Browser Framework GCF). If the user's computer installs this chrome plug-in, the IE browser in the computer can avoid version factors and use Webkit engine and V8 engine for typesetting and calculation. Of course, if the user does not install this plug-in, this code will cause the IE browser to display the effect in the highest document mode.

4. CSS3 media media query is written as:

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

This is a standard way of writing media. In the CSS file, it means: when the page is smaller than 960px, execute the following CSS code. The specific content is ignored for the time being.

For screen in the above code, it means to tell the device to use serif fonts when printing the page, and to use sans-serif fonts when displaying on the screen. At present, many websites directly omit screen, so there is no need to consider the user's need to print web pages, so there is another way of writing:

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

In line with the principle of rigorous thinking, I personally will not use this way of writing.
5. CSS3 media query body code combination:

In responsive web page layout, media query code combination needs to be continuously used. The main function is to determine the width of the adapted screen and apply different CSS according to various width conditions. style.

For example, when the screen width is equal to 960px, change the background color of the web page to red:

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

For example, when the screen width is maximum 960px (less than 960px), change the background color of the web page to black:

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

Like when When the screen width is at least 960px (greater than 960px), change the background color of the web page to orange:

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

More common is a mixed use, such as when the screen width is between 960px and 1200px, change the background color of the web page to orange Is yellow:

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

6. Overall development idea:

The general idea of ​​using media queries in CSS3 is to determine the width range of the web page in different devices. There may be three such ranges (PC, tablet, mobile phone), and There may be four types (PC, tablet, medium and large screen mobile phone, small screen mobile phone), of course, there may be only two types (tablet, mobile phone, PC side does not need to be used as the object of CSS3 media query when developing a separate version), and for Apply different CSS styles to the required page elements in various width ranges to adapt to various devices.

7. Width issues in responsive web development:

In actual development, it is usually necessary to set the maximum width of responsive web pages. Once the maximum width is ignored, bloated or fragmented web page layout will cause visual flooding, which is what we Often said it looks very low.
Also let’s talk about the width of web pages in current display devices (due to space issues, I won’t start with the Industrial Revolution). The most common widths at present are basically: PC side greater than or equal to 960px (1920px, 1600px, 1440px , 1280px, 1140px, 960px), tablets between 960px and 640px (768px, 640px), and mobile phones below 640px (480px, 320px). The above widths have existed for a long time, and the width of web pages in display devices will remain like this for a long time. In this state, when it comes to responsive web page width design, it is basically enough to consider these dimensions.
8. Summary of all parameters of media media query:

The media query also includes related functions that are not commonly used, as follows:

• width: browser visible width,

• height: browser Visual 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 mode,

• aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:检测设备的宽度和高度的比例，

• color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

• color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

• monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

• resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：检测输出的设备是网格的还是位图设备。

9.扩展——在CSS2中同样有媒体查询：

media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：

在HTML文件中的标签中写入这句：

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

以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，

如要判断移动设备是否为纵向放置的显示屏，可以这样写：

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

如要让小于960px的页面执行指定的CSS样式文件，可以这样写：

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

当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。

更多CSS3中的media媒体查询相关文章请关注PHP中文网！