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

Question

目前，我使用 javascript 收听 resize 事件，并根据它的宽度将 css 类应用于我的布局。

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

这行得通，但感觉很笨拙。

我想知道是否有一种仅限 CSS 的方式来定义仅在元素具有特定宽度/大小时才应用的规则？

Answer 1

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

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