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

一个不优雅但可能的解决方案是使用您使用的相同代码，但计算.holderdiv 的屏幕宽度将足够小以隐藏.visible-navdiv：

例如，如果我想在.holder小于 400px 时隐藏它们，因为.holder是 50%：

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

另一种不是纯CSS的方法是使用JS或jQuery来应用条件。