裝置查詢適配橫屏

手機端橫屏**查詢

@media (max-width: 767px) and (orientation: landscape ){}

裝置查詢相容手持裝置

橫屏：@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : landscape) {}，

@media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (orientation : landscape){}，

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : landscape) {}。

使用了google瀏覽器的裝置模擬器，很好用的，新的版本還支援查詢螢幕的狀態，橫屏，豎屏。

兩個都是依次減小的。

豎屏：然後豎屏的居然是這樣的：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 360px) and (max-device-width: 567px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 412px) and (max-device-width: 659px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 600px) and (max-device-width: 960px) and (orientation : portrait) {}，

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : portrait) {}。

兩個都是增大的。

調了好久，好吧！！！

然後豎屏這樣的才對tt

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) {}

@media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (orientation : portrait) {}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : portrait) {}

@media only screen and (min-device-width: 360px) and (max-device-width: 567px) and (orientation : portrait) {}

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait)

@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation : portrait)

@media only screen and (min-device-width: 412px) and (max-device-width: 659px) and (orientation : portrait) {}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}

@media only screen and (min-device-width: 600px) and (max-device-width: 960px) and (orientation : portrait) {}

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : portrait) {}