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盒子里面的所有內容都會跟着進行相應的旋轉！