在app.vue中
<template> <div id="app"> <router-view /> </div> </template> <style lang="scss"> // 1 @media screen and (orientation: portrait) { html { width: 100vmin; height: 100vmax; } body { width: 100vmin; height: 100vmax; } #gyroContain { background-size: cover; background-image: url("./assets/backmr.png"); width: 100vmax; height: 100vmin; transform-origin: top left; transform: rotate(90deg) translate(0, -100vmin); } } @media screen and (orientation: landscape) { html { width: 100vmax; height: 100vmin; } body { width: 100vmax; height: 100vmin; } #gyroContain { width: 100vmax; height: 100vmin; } } // 2 @media screen and (orientation: portrait) { html { width: 100vmin; height: 100vmax; } body { width: 100vmin; height: 100vmax; } #gyroContain2 { background-size: cover; background-image: url("./assets/backmr.png"); width: 100vmax; height: 100vmin; transform-origin: top left; transform: rotate(90deg) translate(0, -100vmin); } } @media screen and (orientation: landscape) { html { width: 100vmax; height: 100vmin; } body { width: 100vmax; height: 100vmin; } #gyroContain2 { width: 100vmax; height: 100vmin; } } #app, body, html { background-image: url("./assets/backmr.png"); background-size: cover; background-repeat: no-repeat; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; padding: 0; margin: 0; height: 100vh; /* 为了让整个页面占满整个屏幕 */ } </style>
页面
<template> <div id="gyroContain2" > <div class="box99"> <div class="box88">1111</div> <div class="box88">22222</div> </div> </div> </template> <style> .box88 { flex: 1; width: 100%; border: 2px solid #552b2b; } .box99 { display: flex; flex-direction: column; border: 2px solid #000; height: 100%; } </style> <script> export default { mounted() {}, }; </script>