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

站长

2022年09月07日 20:57 · 阅读数 287

我是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的项目，建议使用传统解决方案。
如果是内部的工具或平台，可以大胆的使用新版特性。

具体兼容性如下：

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

写在最后

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