有的时候,我们需要为移动端和桌面端指定不同的样式,达到最好的显示效果。这时,我们可以利用 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
如果觉得我的文章对你有用,请随意赞赏