1、前言：
在项目中，我们常会遇见在手机端需要横屏观看的效果，而在pc端则默认切换到竖屏的样式。
或者是，UI提供的图是一个长图，但是在移动端我们需要让这个图在手机横屏时显示。
以上两个都需要我们实行一个框的自行切换方向，这个该如何实现呢？
2、解决方案
我们把所有需要切换方向的内容，都放在一个盒子里面，让这个最外面的盒子实现自动切换方向，里面的内容即可自动实现切换方向！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现pc端移动端自动切换屏幕方向</title> <style> html, body { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; } .box { /* 注意,旋转方向后的box的宽高方向依然保持旋转前的宽高 ，所以旋转后的宽高和实际的宽高显示有区别*/ width: 100vh; height: 100vw; position: absolute; top: 50%; left: 50%; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-touch-callout: none; } /* orientation:landscape代表宽的长度大于高的长度 */ @media (orientation:landscape) { .box { width: 100%; height: 100%; top: 0; left: 0; -webkit-transform: rotate(0); transform: rotate(0); } } </style> </head> <body> <div class="box"> 看我会不会自动切换方向~ </div> </body> </html>
小结：
利用如上代码，即可实现box这个盒子，在pc端是横着的，而在手机端则是竖向显示；同时，放在box盒子里面的所有内容都会跟着进行相应的旋转！