• [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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    如果实现这个div的宽:高=2:1，你会怎么做？

    我看看有多少人认为是这样子实现的：

    .main {
  width: 100%;
  height: 50%;
}

    • 1
    • 2
    • 3
    • 4

    这样子不可以。为什么？

    css中height属性，如果设置为百分比，会用它的父元素的 高度 乘以height百分比。

    但是这个案例中，div的父元素body没有设置高度，也就是说body的真实高度是靠它的子元素来确定的，它的孩子有多高，它就有多高。

    好家伙，死锁了。

    所以这种情况下，如果父元素高度不确定，那么height百分比就无效了！以防死锁。

    传统解决方案

    通常，我们这么实现：

    .main {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    代码片段

    设置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;
}

    • 1
    • 2
    • 3
    • 4

    代码片段

    但是它确实是比较新的特性：

    • 如果是toC或者toB的项目，建议使用传统解决方案。
    • 如果是内部的工具或平台，可以大胆的使用新版特性。

    具体兼容性如下：

    1.png

    写在最后

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

  • 相关阅读:
    Git命令快速入门（建议收藏）
    [LeetCode]剑指 Offer 42. 连续子数组的最大和
    【解决方案】ArcGIS Engine二次开发时，运行后出现“正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain...”
    测开要做的开发工作到底是做什么
    微软警告 Windows 8.1 用户：系统即将停止支持，建议购买 Win11/10 新设备
    apollo自动驾驶进阶学习之：在apollo中模拟障碍物的三种方法
    AIOT在数字化转型中的机遇和挑战
    c++ 获取当前时间（精确至秒、毫秒和微妙）
    2022亚马逊云科技re:Invent科创风尚，抢占下一个万亿赛道
    HashMap很美好，但线程不安全怎么办？ConcurrentHashMap告诉你答案！
  • 原文地址：https://blog.csdn.net/kd_2015/article/details/126565649