<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 横屏 */
@media all and (orientation: landscape) {
.ctBox {
width: 90vw;
height: 50vh;
padding-left: 100px;
box-sizing: border-box;
border: 1px solid yellow;
}
}
/* 竖屏 */
@media all and (orientation: portrait) {
/* 旋转容器 */
.ctBox {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* Internet Explorer 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari & Chrome */
-o-transform: rotate(90deg); /* Opera */
}
.ctBox {
width: 90vw;
height: 50vh;
padding-left: 100px;
box-sizing: border-box;
border: 1px solid gray;
}
}
</style>
<body>
<div class="ctBox">
这是一个标题
</div>
</body>
<script>
</script>
</html>