由於現在瀏覽器衆多，瀏覽器兼容，自適應的學習已經成爲一個美工，和程序的必修，在這個ipad項目中就遇到這個問題，需要兼容ie,谷歌，火狐，ipad等瀏覽器。經過度娘和谷歌的介紹咱也學到一點東西，記錄一下
瀏覽器的自適應大小，首先考慮大小自適應就要考慮現在瀏覽器的分辨率，以及不同瀏覽器對不同分辨率的解釋，以及現在顯示器的大小不同分辨率肯定也不同。所以這裏就要使用到css的一個百分比屬性。
1. 使用百分比有一個需要注意的地方：比如如果寬度使用百分比，（例如cctvipad 項目第三頁中間部分）那麼就要保證這一部分所有的寬度都按照百分比，包括mragin，padding，border，（可以參考盒子模型）
2. 下面圖形中，第一個div padding 4% ,寬度爲92% 4%+92%+4% =100% 剛好100% （其實這裏還有一個border屬性，總的加起來是大於100%，稍後學習。）
3. 第二個div 寬度爲100% 橫向margin 0 padding 10px 0+10px+100%+10px+0>100% 這個時候就會把盒子撐大，就破壞了整體的樣式
4. 
5. 另外，有時候div 需要有一個border 屬性，border 屬性一般很小 1px，經過剛纔測試border按照百分比是不起作用的，這個時候計算 如果滅有考慮進去border的屬性就會出現將盒子模型撐大，以至於可能出現瀏覽器滑動條。所以建議這個時候 不包括border 的寬度綜合小於100%，例如99% 98% 這樣就給border 留出了空間，也不會導致樣式變化
6. 
7. 百分比是在同級的div中計算的，字集div中相對父級div，寬度又是100%
8. 頁面佈局的時候建議
o div按照層次佈局，例如 整個頁面先按照左右分爲 左右兩個div，左邊div又在內部分爲上下兩個div，右邊div又在內部分爲3個div。然後填充內容的時候就把內容填充在最終的div內，調整樣式尤其寬高，這樣就可以在div層去調整，內容層就可以直接按照寬高100%寫。
o 如下圖，整個頁面寬度爲100% ，左爲70% 右爲30%， 左總高度爲100% 左1 爲50% 左2 爲50% 。同理右1，右2，右3 總高度爲100%
o 
9. 百分比佈局也會出現一些問題，比如頁面的左邊要求寬度是一定的，或者寬度不能小於800px，這個時候，如果按照百分比，用戶在拖動瀏覽器的時候就有可能導致左邊寬度會小於800px，頁面樣式亂掉。
10. 這個時候的一個解決辦法就是使用js去控制，基本原理就是得到瀏覽器的寬高，然後去計算相應的寬高，如果低於最小寬度怎麼處理，高於最小寬度怎麼處理。獲得瀏覽器相關寬高js如下
var text=''+
'瀏覽器可見區寬度：'+document.documentElement.clientWidth+
'瀏覽器可見區高度：'+document.documentElement.clientHeight+
'網頁（body）可見區域寬：'+document.body.clientWidth+
'網頁（body）可見區域高：'+document.body.clientHeight+
'網頁可見區域寬(包括邊線的寬)：'+document.body.offsetWidth +
'網頁可見區域高(包括邊線的寬)：'+document.body.offsetHeight +
'網頁正文全文寬：'+document.body.scrollWidth+
'網頁正文全文高：'+document.body.scrollHeight+
'網頁被捲去的高：'+document.body.scrollTop+
'網頁被捲去的左：'+document.body.scrollLeft+
'網頁正文部分上：'+window.screenTop+
'網頁正文部分左：'+window.screenLeft+
'屏幕分辨率的高：'+window.screen.height+
'屏幕分辨率的寬：'+window.screen.width+
'屏幕可用工作區高度：'+window.screen.availHeight+
'屏幕可用工作區寬度：'+window.screen.availWidth;
alert(text);
這時就可以根據 得到寬高去設置頁面的相應寬高
$('.b-style-content-right-one').attr('style','height:'+parseInt(rightHeigtt*0.39)+'px;');
$('.b-style-content-right-two').attr('style','height:'+parseInt(rightHeigtt*0.20)+'px;');
$('#opinion').attr('style','height:'+parseInt(rightHeigtt*0.20)+'px;');
$('.b-style-content-right-four').attr('style','height:'+parseInt(rightHeigtt*0.41)+'px;');
$('.b-style-video').attr('style','height:'+(videoHeight-45-45-5)+'px;');
$('#div_video').attr('style','height:'+(videoHeight-45-45-5)+'px;');
附件爲一個測試頁面。