码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-04 01:10:29      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:ack   浏览器兼容性   asi   ref   规范   tom   media   兼容性   宽度   

  • ??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易站

    标签:ack   浏览器兼容性   asi   ref   规范   tom   media   兼容性   宽度   

    原文地址:https://www.cnblogs.com/breakyizhan/p/13233354.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!