[CSS 入门到进阶] 外国前端开发者说的 Intrinsic Ratios in css 是什么意思？

2022 年 8 月 24 日
广东
本文字数：1425 字
阅读完需：约 5 分钟

我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

解释 Intrinsic Ratios in css

自从互联网 Web 诞生以来，外国开发者就开始了对 Intrinsic Ratios (aka Aspect Ratios) 的讨论。

Intrinsic Ratios 直译：固有的比例。
aka：你见过 rapper 说话吗？这个 aka 就是他们常说的『 Hey man, 我是 AA aka ZZ 』中的 aka，是 also known as 的缩写。
Aspect Ratios 直译：纵横比。

用中国前端开发者的话说，就是在未知宽高的情况下，使一个元素保持固定的长宽比。

（备注：该问题要求未知宽高是因为，如果已知元素宽度，而固定的长宽比也是知道的，那么高度是可以直接算出来的，可以在 css 写死 width 和 height，这种问题没挑战性。所以要求未知宽高）

Intrinsic Ratios 案例

比如做一个固定比例的视频播放器，不管你上传的视频是什么分辨率，你总让它保持 16:9 的比例。此外网页需要是响应式的，视频宽度是 100%，即视频宽度随着浏览器宽度变化而变化，也就是说：该元素的具体宽度、高度是未知的。那么这就是一种 Intrinsic Ratios 问题。

举个例子

举个例子，这里有个 div：

<html><body>  <div class="main">  </div></body></html>

复制代码

如果实现这个 div 的宽:高=2:1，你会怎么做？

我看看有多少人认为是这样子实现的：

.main {  width: 100%;  height: 50%;}

复制代码

这样子不可以。为什么？

css 中height属性，如果设置为百分比，会用它的父元素的高度乘以 height 百分比。

但是这个案例中，div 的父元素 body 没有设置高度，也就是说 body 的真实高度是靠它的子元素来确定的，它的孩子有多高，它就有多高。

好家伙，死锁了。

所以这种情况下，如果父元素高度不确定，那么height百分比就无效了！以防死锁。

传统解决方案

通常，我们这么实现：

.main {  width: 100%;  height: 0;  padding-bottom: 50%;}

复制代码

代码片段

设置height为 0，再设置padding-bottom为 50%。为什么这样就可以了呢？

css 中padding-top或padding-bottom属性，如果设置为百分比，会用它的父元素的宽度乘以百分比。

看到差别了吗？虽然padding-bottom和height同样是表征 y 轴的样式，但是作为百分比时，他们却要乘以不同的底数。估计很多初学者都被搞晕了吧。

现代解决方案

上面是传统的解决方案，如果要实现 16:9 的比例，其实对开发者不太友好，你能要设padding-bottom为 16/9=56.25%才可以，但是可读性很差。

在 2021 年 1 月，Chrome 88 版本发布，支持了新特性：CSS aspect-ratio，可以直接用来解决 Intrinsic Ratios 问题。

现在你可以直接这么写：

.main {  width: 100%;  aspect-ratio: 16/9;}

复制代码

代码片段

但是它确实是比较新的特性：

如果是 toC 或者 toB 的项目，建议使用传统解决方案。
如果是内部的工具或平台，可以大胆的使用新版特性。

具体兼容性如下：

写在最后

我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

发布于: 2022 年 08 月 24 日阅读数: 51

原文链接:【http://xie.infoq.cn/article/d9db1463bc05e292f4ea16efa】。文章转载请联系作者。

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页：支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！

发布

暂无评论

创作场景

[CSS 入门到进阶] 外国前端开发者说的 Intrinsic Ratios in css 是什么意思？

解释 Intrinsic Ratios in css

举个例子

传统解决方案

现代解决方案

写在最后

HullQin

评论