在 CSS 的 Media Query 裡面，有一個設定可以直接根據版面是橫版還是直版來判斷。
orientation: landscape
橫版 或是 橫向
orientation: portrait
直版 或是 直向 或是 縱向
具體看過 w3schools 的範例之後，就會發現，
橫向就是寬大於高，例如 1920 x 1080
直向就是高大於寬，例如 1080 x 1920
用這個設定來進行版面佈局的調整
會比用不同寬度的呈現更好，當然也可以根據寬度加上直向或橫向的組合去進行更細微版型佈局的控制，這樣不同裝置上面的呈現就會更妥當。
參考連結：