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 */
    }
}