[TOC] # 橫屏適配  很多視口我們要對橫屏和豎屏顯示不同的布局，所以我們需要檢測在不同的場景下給定不同的樣式： <br> # JavaScript檢測橫屏 `window.orientation`:獲取屏幕旋轉方向 ~~~ window.addEventListener("resize", ()=>{ if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋轉180度 console.log('豎屏'); }; if (window.orientation === 90 || window.orientation === -90 ){ // 屏幕順時鐘旋轉90度或屏幕逆時針旋轉90度 console.log('橫屏'); } }); 復制代碼 ~~~ <br> # CSS檢測橫屏 ~~~ @media screen and (orientation: portrait) { /*豎屏...*/ } @media screen and (orientation: landscape) { /*橫屏...*/ } ~~~ <br> <br> # 參考資料 [關于移動端適配，你必須要知道的](https://juejin.im/post/5cddf289f265da038f77696c)