详解布局之--静态、自适应、流式、响应式
- 静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
- 自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
- 流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
- 响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。
一、自适应布局
1、定义：可以自动识别屏幕宽度，并做出相应的调整。
例如：《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
2、实现
在网页头部<head>中加入<meta name="viewport" content="width=device-width,initial-scale=1" />
解释：viewpoint是网页默认的宽度和高度，网页默认宽高等于屏幕宽高（width=device-width）,原始缩放比例为1（initial-scale=1），即网页初始大小占网页大小的100%。
3、兼容
对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
4、使用条件
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度。宽度使用百分比（width：xx%）,字号只能使用（em）。
5、核心
使用CSS3的@media媒体查询。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
二、流式布局
1、定义：各个区块的位置是浮动的，当一行容纳不下时，自动挤到下一行，而不会出现滚动条。
