响应式页面布局

**

CSS3 响应式页面布局

.

      今天给到大家介绍的是我们网页中经常用到的一种布局 “响应式布局”，那是响应式布局呢？ 百度百科给出的作答是：“响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的”，说的通俗一些就是：为了不同的大小，分辨率所作出的调整，带给用户更好的体验。

废话不多说，上代码：

1.html布局代码

<div id="head">
         <div class="top">头部</div>
 		 <div class="content">内容</div>
		 <div class="font">底部</div>
</div>

css样式代码

   *{
        padding: 0;						//设置部元素内边距为0px；
    }
    body{
        background-color: dodgerblue;
        font-size: 18px;
    }
    #head{
        overflow: hidden;				//浮动元素会脱离文本流，overflow:hidden元素自动撑开；				
        padding: 5px;
        width: 1200px;
        height:auto;
        margin: 0 auto;