From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/ratio/index.html | 89 ++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/zh-cn/web/css/ratio/index.html (limited to 'files/zh-cn/web/css/ratio') diff --git a/files/zh-cn/web/css/ratio/index.html b/files/zh-cn/web/css/ratio/index.html new file mode 100644 index 0000000000..9768a888f7 --- /dev/null +++ b/files/zh-cn/web/css/ratio/index.html @@ -0,0 +1,89 @@ +--- +title: +slug: Web/CSS/ratio +translation_of: Web/CSS/ratio +--- +
{{CSSRef}}
+ +

       <ratio> CSS数据类型,用于描述媒体查询中的宽高比,表示两个无单位值之间的比例。

+ +

句法

+ +

       在Media Queries Level 3中,<ratio>数据类型包括一个正数的<integer>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度,第二个数字代表高度。

+ +

       在Media Queries Level 4中,<ratio>数据类型包括一个正数的<number>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<number>值。此外,允许使用单个<number>作为值。

+ +

例子

+ +

在媒体查询中使用

+ +
@media screen和(min-aspect-ratio:16/9){...}
+ +

常见的宽高比

+ +

( (

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用法
Ratio4_3.png4/3在20传统电视制式格式
Ratio16_9.png16/9现代"宽屏”电视格式。
Ratio1_1.85.png185/100= 91/50
+ (不允许非整数除数和除数)
自20世纪60年代以来最常见的电影格式。
Ratio1_2.39.png239/100
+ (不允许使用非整数红利和除数)
"宽屏”,变形电影格式。
+ +

产品规格

+ + + + + + + + + + + + + + + + +
规范状态评论
{{SpecName('CSS3 Media Queries','#value','<ratio>')}}{{Spec2('CSS3 Media Queries')}}初步定义。
+ +

浏览器兼容性

+ + + +

{{COMPAT("css.types.ratio")}}

+ +

也可以看看

+ + -- cgit v1.2.3-54-g00ecf