javascript - CSS 唯一定义规则的方式只适用于特定宽度的元素？

Question

目前，我使用 javascript 监听调整大小事件，并根据它的宽度将一个 css 类应用到我的布局。

eg: <800px --> <div class="layout" />
    >800px --> <div class="layout wide" />

这可行，但感觉笨拙。

我想知道是否有一种仅限 css 的方法来定义仅在元素具有特定宽度/尺寸时才应用的规则？

Answer 1

这就是媒体查询的用途，但是它们适用于整个视口(viewport)而不是单个元素。所以你可能有这个:

.layout {
    /* styles for wide layout */
}
@media all and (max-width:800px) {
    .layout {
        /* styles for narrow layout */
    }
}