css - 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 来应用条件。