1. What is media queries, how to understand?
It is based on different screens or devices, an adaptive layout. A set of codes, a plurality of application equipment, rational distribution.
2. Use: how to implement responsive design a website?
1 "meta tag
Add this line of code in the header of the page
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
Wherein: width = device-width: the width of the web width equal to the device
initial-scale = 1.0: 1.0 initial scale. The size of the initial page of the web accounted for 100% of the entire area
maxmum-scale = 1.0: 1.0 maximum zoom ratio
user-scalable: whether you can manually zoom
2 "Compatibility issues:
Because IE9, IE6,7,8 does not support media queries, the following documents 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>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
3 "is set rendering
Sometimes you may encounter upgrade IE browser to IE9 above, but the document mode of the browser is IE8,
How to solve this problem?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This sentence can ensure that IE is always the latest document mode
There is also a more advanced writing:
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
What does that mean?
How this code followed by a chrome = 1, this Google Chrome Frame (Google browser embedded framework GCF) , if any user's computer which installed this chrome plugin, you can let the computer inside no matter which version of IE can be used by Webkit engine and V8 engine layout and operation, very to the force, but if the user did not install this plug-in, that this code will allow IE to show the effect of the highest document mode.
4 "recommended units:
rowing, em,%
rem settings:
5 "How to write a media query code
6 "How to use the @media rule https://www.jianshu.com/p/516c47ef9ac0
7 "How do Adaptive Picture