Html 有没有一种方法可以根据元素的纵横比（纵向\横向）对其进行不同的样式设置？

考虑以下布局：

青色矩形有一个设定的比率。也就是说，矩形的宽度是由其容器的高度按设定的比率导出的

蓝色矩形的高度根据容器的高度设置，其宽度设置为可用视口宽度的其余部分

可以通过拖动更改青色和蓝色矩形的容器

通过JS很容易实现拖动。所描述的布局可以通过CSS实现

通过拖动更改视口大小（浏览器宽度）和容器高度的最终结果是，蓝色容器可能会将纵横比从纵向更改为横向，反之亦然

我的问题-

CSS中有没有一种方法可以根据蓝色容器的纵横比来设置其样式？（纵向/横向）

我考虑过使用媒体查询，但这些查询只查询浏览器的维度，而不是DOM中任意容器的维度

---

另外，我也不太喜欢在JS中检查比例并相应地添加\删除类的想法——像这样向JS中注入表示层逻辑似乎有点不可扩展。

好吧，你不能检查一下“纵横比”的屏幕大小吗（通过谈论

纵横比

我假设您希望在水平和垂直方向上应用不同的样式）蓝色div，并相应地编写媒体查询？@TilwinJoy有多精确？因为纵向/横向比例由两个变量（视口宽度和容器高度）决定纵向或横向媒体组合的数量是无限的。在CSS中没有基于纵横比的样式的通用方法。根据您试图实现的样式，您可能能够基于与纵横比相关的不同属性应用它们。我认为当然，用一点点JavaScript实现这一点是微不足道的。