视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册

    该orientation CSS @media媒体功能可基于视觉取向 viewpor提供样式(或页面中,页面媒体)。

    注意:此功能不符合device 取向。在纵向上打开许多设备上的软键盘将导致视口变得比高度更宽,从而导致浏览器使用横向样式而不是纵向。

    句法

    该orientation功能被指定为从下面的列表中选择的关键字值。

    关键字值

    portrait该设备是纵向的,即高度大于或等于宽度。landscape设备处于横向方向,即宽度大于高度。

    例子

    HTML

    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>

    CSS

    body {
      display: flex;
    }
    
    div {
    ? background: yellow;
    }
    
    @media screen and (orientation: landscape) {
      body {
        flex-direction: row;
      }
    }
    
    @media screen and (orientation: portrait) {
      body {
        flex-direction: column;
      }
    }

    结果

    规范

    Specification

    Status

    Comment

    Media Queries Level 4The definition of ‘orientation‘ in that specification.

    Working Draft

    No change.

    Media QueriesThe definition of ‘orientation‘ in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    ?

    ?

    ?

    ?

    ?

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    ?

    ?

    ?

    ?

    ?

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32275.html

    视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册 - Break易站

    上一篇:背景大小 | background-size (Backgrounds & Borders) - CSS 中文开发手册 - Break易站


    下一篇:视觉格式化模型 | Visual formatting model (Miscellaneous) - CSS 中文开发手册 - Break易站