我有一个战舰游戏，它占据了100%的宽度和100%的机身高度(例如全屏(，这个游戏有一个媒体查询：当屏幕宽度<420px，然后游戏应该旋转90度(到横向模式(，旋转后它也应该占据整个视口，但旋转后游戏的宽度是视口的100%(横向模式下的高度(，高度只有视口的50%左右(横向模式中的宽度(。那么，我如何使游戏在横向模式下占据所有视口呢？
html:
<body>
<div id="game"></div>
</body>
css：
body{
width: 100vw;
height: 100vh;
background-color: var(--darkBackground);
font-family: var(--fontFamily);
}
#game{
width: 100vw;
height: 100vh;
background: rgba(50, 50, 50, 0.4);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 420px){
#game{
height: 100vw;
width: 100vh;
transform: rotate(90deg);
}
}
试试这个：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
width: 100vw;
height: 100vh;
background-color: var(--darkBackground);
font-family: var(--fontFamily);
}
#game{
width: 100vw;
height: 100vh;
background: rgba(50, 50, 50, 0.4);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 420px){
#game{
height: 100vh;
width: 100vh;
transform: rotate(90deg);
}
}
</style>
</head>
<body>
<div id="game">Test</div>
</body>
</html>