H5页面自动适应横竖屏

html-css015

H5页面自动适应横竖屏,第1张

对于样式： 通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差，目前仅有： UC强制竖屏：<meta name="screen-orientation" content="portaint"> QQ强制竖屏：<meta name="screen-orientation" content="landscape"> 通过HTML标签media识别横屏和竖屏,分别引用不同的css： 竖屏： <link rel="stylesheet" media="all and (orientation:portrait" href="portrait.css"> 竖屏： <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 通过css媒体查询判断横竖屏，并分别指定样式： @media screen and (orientation: portrait) { //竖屏  CSS } @media screen and (orientation: landscape) { //横CSS }对于事件：通过onorientationchange事件或resize事件监听手机的横竖屏，分别指定对应的事件。强制通过页面 禁止app或手机的横竖屏的切换是不现实的，H5只能针对自身页面做适配！！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

    margin: 0

    padding: 0

}

.menu {

    font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif

    margin: auto

    width: 300px

}

ul {

    list-style: none

    text-align: center

}

a {

    text-decoration: none

}

.menu>ul>li {

    float: left

    width: 60px

    height: 30px

    line-height: 30px

    margin: 0 10px 0 10px

}

.menu>ul li>ul {

    display: none

    background-color: red

}

a,li {

    cursor: pointer

}

.menu>ul li:hover {

    background-color: #fd3

}

.menu>ul li:hover>ul {

    display: block

}

    </style>

</head>

<body>

    <div class="menu">

        <ul>

            <li> <a href="#">

菜单一

</a>

                <ul>

                    <li>子菜单1</li>

                    <li>子菜单2</li>

                    <li>子菜单3</li>

                </ul>

            </li>

            <li> <a href="#">

菜单二

</a>

                <ul>

                    <li>子菜单1</li>

                    <li>子菜单2</li>

                    <li>子菜单3</li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>