CSS 4.2.4参考手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

语法：

aspect-ratio：<ratio>

取值：

  • <ratio>：指定比率

说明：

定义输出设备中的页面可见区域宽度与高度的比率。

  • 本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。

    简单列举几个应用示例：

    @media screen and (aspect-ratio:1680/957){ … }
  • @import url(example.css) screen and (max-aspect-ratio:20/11);

兼容性：

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-8.02.0-3.04.0-25.0#16.0#115.0+6.0-6.1#12.1-4.3#118.0-24.0#1
9.0-11.0#13.5+26.0+6.1+7.0+4.4+25.0+

  1. 不支持嵌套媒体查询。

示例：

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>media features aspect-ratio_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

@media screen and (max-aspect-ratio:20/11){

    body{color:#f00;}

}

</style>

</head>

<body>

<div class="test">当输出设备中的页面可见宽度与高度比率小于或等于20:11时，本行文字显示为红色</div>

<script>

</script>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例

上一篇：orientation下一篇：device-aspect-ratio