html5响应式（自适应）网页设计

响应式网页设计是指创建适用于移动、平板电脑和PC电脑的网站的设计，响应式网页设计意味着您的网站可以自动调整适应不同设备屏幕，并为用户提供最佳体验。

1、在网页代码的头部，加入一行viewport元标签

viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置。

2、用相对宽度

width:100%;

3、高度自适应：

相对窗口自适应 html,body{height:100%;} （全屏显示的页面必须要给 html,body设置高度100%）

4、字体大小

字体不要使用绝对大小"PX"，要使用相对大小“REM”，例如：

font-size:1.4rem;

5、相对元素或者内容自适应：

不设置高度，或者高度设置成 ： height:auto；

通过最小高度实现高度自适应 ： min-height:300px;_height:300px;

给需要高度自适应的元素添加这些属性：min-height:value; height:auto !important;height:value;

6、图片的自适应

img {width: 100%;}

7、流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

8、自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。