vue做h5项目横屏竖屏切换,主要叙述横屏样式
逻辑是旋转页面就可以
页面代码结构:

<div class="widDiv">
	<div></div>//表格
	<div></div>图表
</div>

做到切换横屏后图表与表格来回切换
css3关键代码:

{
        width: 100vh;
        height: 100vh;
        transform: rotate(90deg);
        transform-origin: 50vw 50vw;
    }

transform起到关键作用旋转完成
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
最终完成效果:
在这里插入图片描述
因为是横屏竖屏切换,所以这里没有做竖屏的判断
有需要的朋友可以在js中判断并且强制切换
判断是否为横竖屏:

function orient() {
if (on == 90 || on == -90) {
$(“body”).attr(“class”, “landscape”);
orientation = ‘landscape’;
return false;
}
else if (on == 0 || on == 180) {
$(“body”).attr(“class”, “portrait”);
orientation = ‘portrait’;
return false;
}
}
Logo

前往低代码交流专区

更多推荐