Прогрессивное улучшение внутри 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 дивы:

например, если бы я хотел скрыть их, когда .holder уже 400 пикселей, так как .holder составляет 50%:

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

Другим способом, который не является чистым CSS, было бы использование JS или jQuery для применения условий.