jquery - 响应式省略 Div

Question

在时间轴上我想显示一天中的几个小时:JSFiddle: https://jsfiddle.net/9532otkm/2/ (简化)。

<div class="day">
<div class="hour">1</div>
<div class="hour">2</div>
<div class="hour">3</div>
<div class="hour">4</div>
...
<div class="hour">22</div>
<div class="hour">23</div>
<div class="hour">24</div>
</div>

.day{
    border: 2px solid #73AD21;
    width: 800px;

}
.hour{
  display: inline-block;
  width: 2em;
  text-align: center;
  vertical-align: middle;
}

当外部 div 变小时，将没有更多空间来显示所有小时。

是否可以使用响应式 css/jquery 以我遗漏一些 div 的方式重新缩放。

例如: 首先是所有时间，如果空间不够，那么只有 3、9、15 和 21 小时...

Answer 1

您可以为此使用@media查询

.day{
    border: 2px solid #73AD21;
    display: inline-block;
}
.hour{
  display: inline-block;
  width: 2em;
  text-align: center;
  vertical-align: middle;
}

@media screen and (max-width: 700px) {  /* adjust the 700px value for your needs */

  /* specific items ver. 2 */
  .hour
  {display: none}
  
  .hour:nth-of-type(3),
  .hour:nth-of-type(9),
  .hour:nth-of-type(15),
  .hour:nth-of-type(21)
  {display: inline-block}

  /* specific items
  .hour:nth-of-type(3),
  .hour:nth-of-type(9),
  .hour:nth-of-type(15),
  .hour:nth-of-type(21)
  {display: none}
  */

  /* odd or even
  .hour:nth-of-type(even)
  {display: none}
  */
}

<div class="day">
  <div class="hour">1</div>
  <div class="hour">2</div>
  <div class="hour">3</div>
  <div class="hour">4</div>
  <div class="hour">5</div>
  <div class="hour">6</div>
  <div class="hour">7</div>
  <div class="hour">8</div>
  <div class="hour">9</div>
  <div class="hour">10</div>
  <div class="hour">11</div>
  <div class="hour">12</div>
  <div class="hour">13</div>
  <div class="hour">14</div>
  <div class="hour">15</div>
  <div class="hour">16</div>
  <div class="hour">17</div>
  <div class="hour">18</div>
  <div class="hour">19</div>
  <div class="hour">20</div>
  <div class="hour">21</div>
  <div class="hour">22</div>
  <div class="hour">23</div>
  <div class="hour">24</div>
</div>

根据评论更新

document.querySelector('input').addEventListener('change', function(e){
  document.querySelector('.day').style.width = e.target.value + 'px';
  if (e.target.value < 484) {
    document.querySelector('.day').classList.add('hide');
  } else {
    document.querySelector('.day').classList.remove('hide');
  }
})

.day{
  border: 2px solid #73AD21;
  width: 484px;
  overflow: hidden;
}
.hour{
  float: left;
  width: 20px;
  text-align: center;
  vertical-align: middle;
}
.day.hide .hour{
  display: none
} 
.day.hide .hour:nth-of-type(3),
.day.hide .hour:nth-of-type(9),
.day.hide .hour:nth-of-type(15),
.day.hide .hour:nth-of-type(21){
  display: inline-block
}

<div class="day">
  <div class="hour">1</div>
  <div class="hour">2</div>
  <div class="hour">3</div>
  <div class="hour">4</div>
  <div class="hour">5</div>
  <div class="hour">6</div>
  <div class="hour">7</div>
  <div class="hour">8</div>
  <div class="hour">9</div>
  <div class="hour">10</div>
  <div class="hour">11</div>
  <div class="hour">12</div>
  <div class="hour">13</div>
  <div class="hour">14</div>
  <div class="hour">15</div>
  <div class="hour">16</div>
  <div class="hour">17</div>
  <div class="hour">18</div>
  <div class="hour">19</div>
  <div class="hour">20</div>
  <div class="hour">21</div>
  <div class="hour">22</div>
  <div class="hour">23</div>
  <div class="hour">24</div>
</div>
<input type="range" name="points" min="100" max="968">