移动端百分比布局

做播放器页面需要是实现播放器宽度与列表宽度比为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>

实现效果：

image.png

移动端百分比布局

推荐阅读更多精彩内容