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

纵横比 | @media.aspect-ratio

aspect-ratio CSS @media媒体功能可用于应用基础上的纵横比视觉效果

语法

aspect-ratio特征被指定为<ratio> 值表示表示视口的宽高比宽高比的值。这是一个范围功能,这意味着您也可以使用前缀min-aspect-ratiomax-aspect-ratio变量分别查询最小值和最大值。

HTML

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

CSS

代码语言:javascript
复制
/* Exact aspect ratio */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: yellow;
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

结果

规范

Specification

Status

Comment

Media Queries Level 4The definition of 'aspect-ratio' in that specification.

Working Draft

No change.

Media QueriesThe definition of 'aspect-ratio' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

?

3.5 (1.9.1)

9.0

?

?

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

?

?

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com