<div id="screen"> <div id="main">强制横屏 <div class="top"></div> </div> </div> #screen { position: fixed; width: 100%; height: 100%; padding: 0; margin: 0; background-color:rgb(228, 180, 180); overflow: hidden } @media screen and (orientation: portrait) { /*竖屏*/ #main { position: absolute; width: 100vh; height: 100vw; top: 0; left: 100vw; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transform-origin: 0% 0%; border: 1px solid red; background: yellow; } .top{ width: 100%; height: 60px; background: red; } } @media screen and (orientation: landscape) { /*手机开启横屏*/ #main { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; border: 1px solid red; background:deepskyblue; } .top{ width: 100%; height: 60px; background: lightskyblue; } }