乐趣区

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

我是 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-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 的我的项目,倡议应用传统解决方案。
  • 如果是外部的工具或平台,能够大胆的应用新版个性。

具体兼容性如下:

写在最初

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

退出移动版