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


  • ??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 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32169.html

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

    上一篇:环境光照水平 | @media.light-level (Media Queries) - CSS 中文开发手册 - Break易站


    下一篇:系统 | @counter-style.system (Counter Styles) - CSS 中文开发手册 - Break易站