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

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

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情

这是我的专栏《前端入门到进阶》,跟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-toppadding-bottom属性,如果设置为百分比,会用它的父元素的 宽度 乘以百分比。

看到差别了吗?虽然padding-bottomheight同样是表征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的项目,建议使用传统解决方案。
  • 如果是内部的工具或平台,可以大胆的使用新版特性。

具体兼容性如下:

image.png

写在最后

我是HullQin,独立开发了联机桌游合集,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋、UNO等游戏,绝不收费,绝无广告,点这就能开始玩。喜欢可以关注我噢~我有空了会分享做游戏的相关技术,会在这2个专栏里分享:《教你做小游戏》《极致用户体验》

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改