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">

Answer 2

自定义解决方案是将类添加到小时，如此

<div class="hour small">6</div>480px

Ansd然后在屏幕小于480px时添加额外的CSS样式以隐藏具有此类名称的元素

@media screen and (max-width: 480px) {
    .small {
      display : none;
    }
}

请参阅此处更新的小提琴

https://jsfiddle.net/9532otkm/5/

响应地离开了Divs

2 个答案: