Responsive leave out Divs

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重新調整方式，我遺漏了一些divs。

例如： 第一個所有小時，如果沒有足夠的空間，則只有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然後添加一個額外的CSS樣式時，屏幕是小於480像素隱藏元素與此類名稱

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

見更新FID DLE這裏

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