html安百分比布局,移动端百分比布局

做播放器页面需要是实现播放器宽度与列表宽度比为2 ：5，播放器宽高比为9 ： 16

实现代码：

* {

margin: 0;

padding: 0;

}

html,

body {

width: 100%;

height: 100%;

}

.wraper {

width: 100%;

background-color: #09F;

padding-top: calc(100% / (16/9 + 2/5));

position: relative;

}

.wraper div {

display: inline-block;

height: 100%;

position: absolute;

top: 0;

}

/* h* (16/9 + 2/5) = 100% */

.wraper .player {

width: calc(100% * 5/7);

background: black;

}

.wraper .list {

width: calc(100% * 2/7);

background: #09F;

right: 0;

}

实现效果：

image.png