html自适应浏览器宽度,未知DIV宽高(16:9)自适应浏览器窗口宽高
程序开发
2023-09-17 13:18:13
可以用媒体查询
@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;
}
}
实际效果截图：
标签：
上一篇：
vue移动端项目代码拆分记录
下一篇：
相关文章
-
无相关信息