CSS 媒体功能 - orientation

CSS 媒体功能 - Orientation 用于确定设备的屏幕或页面是纵向还是横向。

设备的方向并不总是与屏幕的方向相同。例如，如果以纵向打开设备上的软键盘，屏幕将变宽而不是变高。在这种情况下，浏览器将使用横向样式而不是纵向样式。

可能的值

portrait − 当视口的高度超过其宽度时应用此值，这通常表示设备是垂直持有的。
landscape − 当视口的宽度大于其高度时，将应用此值，通常表示设备处于水平方向。

语法


 orientation: portrait|landscape;

CSS 方向 - portrait 值

以下示例演示了当设备处于portrait 时，盒子的背景颜色将变为绿色 -


<html>
<head>
<style>
	 	iframe {
	 	 	 display: block;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<label id="labelWidth" for="width"></label>
	 	<input id="width" type="range" min="120" max="250" step="4" />
	 	
	 	<iframe
	 	id="block"
	 	srcdoc="<style> @media (orientation: portrait) { div { background: lightgreen; } } </style><div><h3>To see the effect resize your viewport's width.</h3> <p>When box is in portrait orientation background changes to green color, otherwise background color will remain white.</p> </div>">
	 	</iframe>
	 	
	 	<script>
	 	 	 const updateSize = (size, label) => {
	 	 	 	 	block.style[size] = `${eval(size).value}px`;
	 	 	 };

	 	 	 width.oninput = () => updateSize("width", labelWidth);
	 	</script>
</body>
</html>

CSS 方向 - landscape 值

以下示例演示了当设备处于 landscape 时，盒子的背景颜色将变为黄色 -


<html>
<head>
<style>
	 	iframe {
	 	 	 display: block;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<label id="labelWidth" for="width"></label>
	 	<input id="width" type="range" min="120" max="250" step="4" />
	 	
	 	<iframe
	 	id="block"
	 	srcdoc="<style> @media (orientation: landscape) { div { background: yellow; } } </style><div><h3>To see the effect resize your viewport's width.</h3> <p>When box is in portrait orientation background changes to yellow color, otherwise background color will remain white.</p> </div>">
	 	</iframe>
	 	
	 	<script>
	 	 	 const updateSize = (size, label) => {
	 	 	 	 	block.style[size] = `${eval(size).value}px`;
	 	 	 };

	 	 	 width.oninput = () => updateSize("width", labelWidth);
	 	</script>
</body>
</html>

打印本页