写点什么

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

作者:HullQin
  • 2022 年 8 月 24 日
    广东
  • 本文字数:1425 字

    阅读完需:约 5 分钟

[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 噢~我有空了会分享做游戏的相关技术。

发布于: 2022 年 08 月 24 日阅读数: 51
用户头像

HullQin

关注

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

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

评论

发布
暂无评论
[CSS入门到进阶] 外国前端开发者说的 Intrinsic Ratios in css 是什么意思?_CSS_HullQin_InfoQ写作社区