CSS 媒体查询 orientation
1、基本介绍
- CSS 媒体查询 orientation 用于检测视口（viewport）的宽高比。这不等同于设备的物理方向
| 值 | 说明 |
|---|---|
| portrait | 视口处于纵向，即高度大于等于宽度 |
| landscape | 视口处于横向，即宽度大于高度 |
2、演示
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 媒体查询 orientation</title>
<style>
body {
display: flex;
}
div {
background: yellow;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>