强制横屏

强制横屏

其实强制横屏就是利用媒体查询中的一个来完成对屏幕的检测和两套css的转换

<div id="screen">
	<div id="main">强制横屏
		 <div class="top"></div>
	</div>
</div>
#screen {
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color:rgb(228, 180, 180);
	overflow: hidden
}


@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%;
		border: 1px solid red;
		background: yellow;
	}
	.top{
		width: 100%;
		height: 60px;
		background: red;
	}
}

@media screen and (orientation: landscape) {
	/*手机开启横屏*/
	#main  {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		border: 1px solid red;
		background:deepskyblue;
		
	}
	.top{
		width: 100%;
		height: 60px;
		background: lightskyblue;
	}
}

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页