参考资料点这里
额简单计算下
按百分比计算
16:9也就是高度是宽度的百分之56.25
关键的地方
padding的百分比是按照容器宽度计算的
容器
<div id="pad">
<div id="content">这里放页面的内容</div>
</div>
样式
*{
padding:0;
margin:0;
}
#pad{
height:0;
position:relative;
padding-bottom:56.25%;
}
#content{
width: 100%;
height:100%;
position:absolute;
}
就这样就ok了
当然这个是页面全屏状态下的
不是全屏的话
要考虑浏览器标题栏、地址栏这部分