首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

高度 | @media.height

height CSS @media媒体功能可基于高度应用样式视觉样式(或页面中,为页面媒体)。

语法

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

例子

HTML

代码语言:javascript
复制
<div>Watch this element as you resize your viewport's height.</div>

CSS

代码语言:javascript
复制
/* 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

?

?

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com