CSS 媒体功能 - height _CSS 菜鸟教程

CSS 媒体功能 height 用于根据视口的高度应用不同的样式。

媒体功能 height 还可以与 min-height 和 max-height 属性一起使用，以指定视口的最小和最大高度。

可能的值

<length> - 视口的高度由特定的长度值表示，例如像素（px）等。

语法

height: <length>

CSS height - length 值

以下示例演示了如果高度媒体特征的值等于 150px，则元素的背景颜色将更改为紫色，否则背景颜色将保持白色 -

<html>
<head>
<style>
	 	iframe {
	 	 	 display: block;
	 	}
</style>
</head>
<body>
	 	
	 	<label id="labelHeight" for="width">Height:150</label>
	 	<input id="height" name="height" type="range" min="120" max="200" step="5" value="150" />
	 	
	 	<iframe
	 	id="block"
	 	srcdoc="<style> @media (height: 150px) { div { background:violet; } } </style><div>To see the effect resize your viewport's height.</div>">
	 	</iframe>
	 	 		
	 	<script>
	 	 	 const updateSize = (size, label) => {
	 	 	 	 	block.style[size] = `${eval(size).value}px`;
	 	 	 	 	label.textContent = `${size}: ${eval(size).value}`;
	 	 	 };
	 	 	 height.oninput = () => updateSize("height", labelHeight);
	 	</script>
</body>
</html>

CSS height - max-height 属性

以下示例演示了当视口的高度为 170px 或更小时，框元素的背景颜色将更改为浅绿色，否则背景颜色将保持白色 -

<html>
<head>
<style>
	 	iframe {
	 	 	 display: block;
	 	}
</style>
</head>
<body>
	 	
	 	<label id="labelHeight" for="width">Height:150</label>
	 	<input id="height" name="height" type="range" min="120" max="200" step="5" value="150" />
	 	
	 	<iframe
	 	id="block"
	 	srcdoc="<style> @media (max-height: 170px) { div { background: lightgreen; } } </style><div>To see the effect resize your viewport's height.</div>">
	 	</iframe>
	 	 		
	 	<script>
	 	 	 const updateSize = (size, label) => {
	 	 	 	 	block.style[size] = `${eval(size).value}px`;
	 	 	 	 	label.textContent = `${size}: ${eval(size).value}`;
	 	 	 };
	 	 	 height.oninput = () => updateSize("height", labelHeight);
	 	</script>
</body>
</html>

CSS height - min-height 属性

以下示例演示了当视口的高度大于 140px 时，框元素的背景颜色将更改为浅绿色，否则背景颜色将保持白色 -

<html>
<head>
<style>
	 	iframe {
	 	 	 display: block;
	 	}
</style>
</head>
<body>
	 	
	 	<label id="labelHeight" for="width">Height:150</label>
	 	<input id="height" name="height" type="range" min="120" max="200" step="5" value="150" />
	 	
	 	<iframe
	 	id="block"
	 	srcdoc="<style> @media (min-height: 140px) { div { background: lightgreen; } } </style><div>To see the effect resize your viewport's height.</div>">
	 	</iframe>
	 	 		
	 	<script>
	 	 	 const updateSize = (size, label) => {
	 	 	 	 	block.style[size] = `${eval(size).value}px`;
	 	 	 	 	label.textContent = `${size}: ${eval(size).value}`;
	 	 	 };
	 	 	 height.oninput = () => updateSize("height", labelHeight);
	 	</script>
</body>
</html>

<< CSS 媒体功能 - hover CSS 媒体功能 - grid >>