关于H5从PC端切换到移动端，屏幕显示内容由横向转为竖向的研究！

1、前言：

     在项目中，我们常会遇见在手机端需要横屏观看的效果，而在pc端则默认切换到竖屏的样式。

　 或者是，UI提供的图是一个长图，但是在移动端我们需要让这个图在手机横屏时显示。

　 以上两个都需要我们实行一个框的自行切换方向，这个该如何实现呢？

 

2、解决方案

　  我们把所有需要切换方向的内容，都放在一个盒子里面，让这个最外面的盒子实现自动切换方向，里面的内容即可自动实现切换方向！

　 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现pc端移动端自动切换屏幕方向</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
            margin: 0;
            padding: 0;
        }

        .box {
            /* 注意,旋转方向后的box的宽高方向依然保持旋转前的宽高 ，所以旋转后的宽高和实际的宽高显示有区别*/
            width: 100vh;
            height: 100vw;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg);
            -webkit-touch-callout: none;
        }
　　　　　/* orientation:landscape代表宽的长度大于高的长度 */
        @media (orientation:landscape) {
            .box {
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                -webkit-transform: rotate(0);
                transform: rotate(0);
            }
        }
    </style>
</head>

<body>
    <div class="box">

        看我会不会自动切换方向~
    </div>
</body>

</html>

小结：

利用如上代码，即可实现box这个盒子，在pc端是横着的，而在手机端则是竖向显示；同时，放在box盒子里面的所有内容都会跟着进行相应的旋转！

posted @ 2018-10-31 10:27  茶记忆  阅读(2445)  评论(0)  编辑  收藏  举报