媒体查询之横屏和竖屏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        body {
            padding: 0;
            margin: 0
        }

        /* orientation: portrait | landscape */
        /* 横/坚屏 */
        
        /* 肖像（坚屏）模式 */
        @media only screen and (orientation: portrait) {
            body {
                background-color: blue;
            }
        }
        
        /* 全景（横屏）模式 */
        @media screen and (orientation: landscape) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ytwanzi/p/6519158.html