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