CSS - CSS 媒体查询 orientation

CSS 媒体查询 orientation

1、基本介绍

• CSS 媒体查询 orientation 用于检测视口（viewport）的宽高比。这不等同于设备的物理方向

值	说明
portrait	视口处于纵向，即高度大于等于宽度
landscape	视口处于横向，即宽度大于高度

2、演示

<!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>