vue做h5项目横屏
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;vue做h5项目横屏竖屏切换,主要叙述横屏样式。因为是横屏竖屏切换,所以这里没有做竖屏的判断。有需要的朋友可以在js中判断并且强制切换。transform起到关键作用旋转完成。做到切换横屏后图表与表格来回切换。逻辑是旋转页面就可以。
·
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;
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)