<ratio>

翻译不完整。 请帮助我们翻译这篇文章！

       <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.png 4/3 在20传统电视制式格式。
Ratio16_9.png 16/9 现代"宽屏”电视格式。
Ratio1_1.85.png 185/100= 91/50
(不允许非整数除数和除数)		 自20世纪60年代以来最常见的电影格式。
Ratio1_2.39.png 239/100
(不允许使用非整数红利和除数)		 "宽屏”,变形电影格式。

产品规格

规范 状态 评论
Media Queries
<ratio>		 Recommendation 初步定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<ratio>Chrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 9.5Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 4.2Samsung Internet Android Full support 1.0
Accepts <number> / <number> or single <number> as a value.Chrome No support NoEdge No support NoFirefox Full support 70
Disabled
Full support 70
Disabled
Disabled From version 70: this feature is behind the layout.css.aspect-ratio-number.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

也可以看看