最近开发微信公众号的时候遇到一个需求，就是在手机页面上有许多许多ECharts图形展示。
为了更好的用户体验，当用户竖屏打开时我们需要将手机页面的内容横过来，效果如下所示：
竖屏状态
横屏状态
好了，现在我的项目中html结构如下：
<body>
<div id="main"></div> //这是我的画布
</body>
我们利用transform将这个父容器在竖屏状态下整体顺时针旋转90º，这样就得到了一个横屏的状态。但是还不够，因为旋转元素的基点默认为本身的中心点。所以我们需要设置一下它的旋转中心为左上角，即transform-origin: 0% 0%；这样的话页面被“转出了屏幕”停留在屏幕的左侧，最后一步只需要将它往右平移一个屏幕的宽度就刚刚好（left：100vw）。请看示意图：
image.png
完整代码如下：
<style type="text/css">
body{
position:fixed; //将body铺满整个屏幕
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color:rgb(51, 51, 51);
overflow: hidden;
}
#main{ //注意这里：初始时候我们需要将这个div的长宽给设置一下（ps：宽度要大于高度）
width:560px;
height:320px;
}
@media screen and (orientation: portrait){ //竖屏状态下
#main{
position:absolute;
width: 100vh;
height: 100vw;
top: 0;
left: 100vw;
-webkit-transform:rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform:rotate(90deg);
transform-origin: 0% 0%;
}
}
@media screen and (orientation: landscape) { //横屏状态下
#main {
position:absolute;
top:0;
left:0;
width: 100vw;
height: 100vh;
}
}
</style>
网友评论