html自适应浏览器宽度,未知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示例如下

Title

#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;

}

}

实际效果截图：