由于现在浏览器众多，浏览器兼容，自适应的学习已经成为一个美工，和程序的必修，在这个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;');
附件为一个测试页面。