媒体查询之横屏和竖屏

本文转载自查看原文 2017-03-08 14:00 1639

<!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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js判断是横屏还是竖屏 Android 设置横屏或竖屏媒体查询写法 @media 媒体查询媒体查询媒体查询@media的使用 html --- rem 媒体查询媒体查询和rem布局 CSS媒体查询及其使用 iOS 屏幕旋转之横屏(landscape)和竖屏（portrait）