自适应布局（@media）

一、自适应布局（Responsive）

可以自动识别屏幕宽度、并做出相应调整网页布局。

1.网页头部引入：

<meta name="viewport" content="width=device-width, initial-scale=1" />

网页宽度等于屏幕宽度（width=device-width），原始缩放比例为1.0（initial-scale=1）。
所有主流浏览器都支持（IE9），对于IE6~8，引入css3-mediaqueries.js

<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

2.用法：
css样式，如：

@media screen (max-width: 1000px){}
...

3.注意事项：
①不适应绝对宽度/固定宽度。即 css不能指定具体像素宽度，只能指定百分比宽度或者auto。

width: xxx %;
或者
width: auto;

②相对大小字体。字体不能使用绝对大小（px），而是使用相对大小（em）。如：

body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}

指定字体大小是页面默认大小的100%（浏览器的默认像素是16px）

h1 {
　　　　font-size: 1.5em; 
　　}
small {
　　　　font-size: 0.875em;
　　}
img{
   max-width: 100%;
   width: 100%;
}

指定h1的大小是默认大小的1.5倍，即24像素（16乘1.5=24），small的大小是默认大小的0.875倍，即14px（16乘0.875=14）