高度 | @media.height (Media Queries)

  CSS 中文开发手册

高度 | @media.height (Media Queries) - CSS 中文开发手册

该height CSS @media媒体功能可基于高度应用样式视觉样式（或页面中，为页面媒体）。

语法

该height特征被指定为<length>，表示视口高度的值。这是一个范围功能，也就是说，您也可以使用前缀min-height和max-height变量分别查询最小值和最大值。

例子

HTML

<div>Watch this element as you resize your viewport's height.</div>

CSS

/* Exact height */
@media (height: 360px) {
  div {
    color: red;
  }
}

/* Minimum height */
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/* Maximum height */
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}

结果

规范

Specification	Status	Comment
Media Queries Level 4The definition of 'height' in that specification.	Working Draft	The value can now be negative, in which case it computes to false.
Media QueriesThe definition of 'height' in that specification.	Recommendation	Initial definition. The value must be nonnegative.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	?	9.0	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

  CSS 中文开发手册

  本文标题：高度 | @media.height (Media Queries) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32471.html