有的时候,我们需要为移动端和桌面端指定不同的样式，达到最好的显示效果。这时，我们可以利用 CSS 的媒体查询来实现这个目的。

这是一个简单的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>判断设备方向</title>
        <style>
            @media (orientation: landscape) {
                body {
                    background-color:blue;
                }
            }
          
            @media (orientation: portrait) {
                body {
                    background-color:yellow;
                }
            }
        </style>
    </head>
    <body>
        <p>横屏时颜色为蓝色，竖屏时颜色为黄色</p>
    </body>
</html>

orientation: portrait 是竖屏，orientation: landscape 是横屏

最后修改：2021 年 12 月 23 日 01 : 17 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏