web彻底响应式布局

在页面布局中响应式布局优点很明显，能适应不一样的屏幕，如今不少的网站系统也都是响应式布局

一般使用bootstrap做为框架来布局，这种框架也是针对于宽度的响应式，高度根据内容的多少，

假如咱们须要一台电脑上显示的页面的样式与一个很大的屏幕上显示的同样，大的屏幕字体与间距确定要比小的屏幕大，这时候bootstrap并不能知足要求，须要另外的处理方法

如宽高比例16:9，外层div的宽度定为100%；高度js控制，而后里面的div用百分比来定义高度，以宽度640px 屏幕为基准，20px 字体，随着屏幕的变大字体随着屏幕变大

<div class="wrap">
   <div class=content>
    里面内容1
   </div>
   <div class=content>
    里面内容2
   </div>
   <div class=content>
    里面内容3
   </div>
   <div class=content>
    里面内容4
   </div>
   <div class=content>
    里面内容5
   </div>
</div>

<style>
.wrap{width:100%;background:#ccc;}
.content{height:20%;border:1px solid #fff;font-size:0.2rem;}
</style>

<script>
$(function(){
$(".wrap").css("height",$(".wrap").width()*16/9)
});

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
document.documentElement.style.fontSize=w/6.4 + 'px';
</script>

下面是网上看到的一个比较好的文章

http://www.cnblogs.com/constantince/p/5708930.html