纵横比 | @media.aspect-ratio (Media Queries)

  CSS 中文开发手册

纵横比 | @media.aspect-ratio (Media Queries) - CSS 中文开发手册

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

语法

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

例

HTML

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

CSS

/* 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	?	?	?	?	?

  CSS 中文开发手册

  本文标题：纵横比 | @media.aspect-ratio (Media Queries) – CSS 中文开发手册 - Break易站

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