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小于400px时隐藏它们，因为.holder是50％：

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

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

div中的渐进式增强功能

1 个答案: