div內的漸進式增強

Question

任何人都知道一種方法來定位一個div，它將根據div的大小隱藏/顯示內容，類似於媒體標籤的工作方式。

例

<div class="wrapper"> 

    <div class="holder"> 
    <div class="nav visible-nav"></div> 
    <div class="content"></div> 
    </div> 

    <div class="holder"> 
    <div class="nav visible-nav"></div> 
    <div class="content"></div> 
    </div> 
</div> 

.wrapper{width:100%;} 
.holder{width:50%;float:left;} 
.holder{width:50%;float:right;} 

使用媒體標記我可以定位它像這樣：

@media only screen and (max-width:1200px){ 
     .visible-nav{ 
      display:none; 
     } 
    } 

任何辦法可以靶向DIV而不是整個屏幕??

Answer 1

一個不優雅，但可能的解決方案是使用您使用相同的代碼，但計算什麼屏幕寬度.holder div一定是小到足以隱藏.visible-nav的div：

例如，如果我想隱藏在.holder比400像素窄，因爲.holder爲50％：

@media only screen and (max-width:800px){ 
    .visible-nav{ 
     display:none; 
    } 
} 

另一種方式是不是純CSS是使用JS或jQuery的應用條件。