定義僅適用於特定寬度元素的規則的CSS唯一方法？

目前，我使用javascript來偵聽resize事件，並根據它的寬度將CSS類應用於我的佈局。定義僅適用於特定寬度元素的規則的CSS唯一方法？

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

這個工程，但感覺笨重。

我想知道是否存在一個僅用於元素是特定寬度/大小的應用程序定義規則的CSS的方式嗎？

這是媒體查詢的目的，但它們適用於整個視口而不是單個元素。所以你可能會有這個：

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

2013-03-02 00:39:04

很高興知道，謝謝。您是否知道是否有基於元素寬度的規則應用，而不是視口？ – user1031947 2013-03-02 00:40:52

不，我恐怕沒有。 JavaScript是你唯一的選擇，但請記住，如果你以這種方式應用樣式，它可能會阻止正確更新的寬度。 – 2013-03-02 00:41:24

回答