我是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 噢～我有空了会分享做游戏的相关技术。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
