样式取决于父亲的宽度

Question

我使用原子设计的编码项目。它给了我一个想法，不是根据视口（通过媒体查询）改变css属性，而是根据父的宽度。

E.g。当元素宽度为1200px，宽度为280px时，我的元素看起来有所不同。但是根据不同的上下文，我也需要在桌面上使用280px版本。

有一些最佳做法如何做到这一点？你有什么想法？这是我尝试实现的一个例子（当然是@has语法组成）：

.element {
    @has (max-width: 1000px) {
        .element-something1 {
            display:none;
        }
        .element-something2 {
            display:block;
        }
    }
    @has (max-width: 800px) {
        .element-something1 {
            display:block;
        }
        .element-something2 {
            display:none;
        }
    }
}