未知DIV宽高(16:9)自适应浏览器窗口宽高

    @media screen and (max-aspect-ratio: 16/9){
        #closeBox {
            width: 100vw;
            height: calc(100vw * 9 / 16);
        }
    }
    @media screen and (min-aspect-ratio: 16/9){
        #closeBox {
            width: calc(100vh * 16 / 9);
            height: 100vh;
        }
    }

完整html示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #closeBox {
        background-color: #ff8800;
        border: 3px solid #00ff00;
        box-sizing: border-box;
    }
    @media screen and (max-aspect-ratio: 16/9){
        #closeBox {
            width: 100vw;
            height: calc(100vw * 9 / 16);
        }
    }
    @media screen and (min-aspect-ratio: 16/9){
        #closeBox {
            width: calc(100vh * 16 / 9);
            height: 100vh;
        }
    }
</style>
<body style="margin: 0;">
<div id="dialogFrame" style="width: 100vw;height: 100vh;background-color: #00b3ee;">
    <div id="closeBox">


    </div>
</body>
</html>

实际效果截图：
图片描述

Fractal

5.5k22331

发布于
2019-05-28

vw 视口宽度
vh 视口高度
vmin min(vw, vh)
vmax max(vw, vh)

所以 css 就很简单了

div
{
    width:100vmin;
    height:56.25vmin; /* 56.25 = 100 / 16 * 9 */
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

未知DIV宽高(16:9)自适应浏览器窗口宽高

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

你期待的结果是什么？实际看到的错误信息又是什么？

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

两个promise问题？

如何自定义设置虚线边框的样式？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？