做播放器页面需要是实现播放器宽度与列表宽度比为2 :5,播放器宽高比为9 : 16
实现代码:
<style>
* {
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;
}
</style>
</head>
<body>
<div class="wraper">
<div class="player"></div>
<div class="list"></div>
</div>
</body>
实现效果: