のCss Iマークアップ下記（demostrationために簡略化）している幅

Question

メディアクエリパーセント

https://jsfiddle.net/n07znakb/3/

<div id="wrapper"> 
    <div class="playlist-inner"> 
    <div class="playlist-content"> 

     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 

    </div> 
    </div> 
</div> 

プレイリスト・コンテンツは（プレイリスト項目番号xプレイリスト項目幅）1000pxの幅であります私はこれをjavascriptで設定します。

プレイリストアイテムが10個ある場合、その幅は2000pxになります。私は次のことを達成したい

：ラッパーの幅は600と400ピクセルの間にあるとき

ラッパーの最大幅は600PXで、3プレイリスト - 項目は（これは動作します） 表示されている、私はプレイリストの項目は33.3％になりたいですプレイリストの内側の幅（これは2番目の上位の親です）、3つのプレイリスト項目が表示されます。 ラッパーの幅が400pxの幅より小さい場合、プレイリストアイテムがプレイリストインナーの50％の幅になるようにしたいので、2つのプレイリストアイテムが表示されます。

私はjavascriptでこれを行うことができます。私はcssだけでもできるのだろうか？

33.3％の幅を設定すると、再生リストコンテンツの親の幅が必要になるので、現在のCSSでは動作しませんが、プレイリストインナーであるもう1つの上位の親の33.3％の幅にします。

うまくいけば、誰かが理解できると思います。

Answer 1

モバイルからコードを作成する必要があります。 ラッパーを相対に設定します。

0pxから抜本的くするために、プレイリストアイテムを100％にしたいとします。

400以上から50％が必要です。

@media screen and (min-width: 400px) { 
    .playlist-item{width:50%;} 
} 

600以上から、33.3％が必要です。

@media screen and (min-width: 600px) { 
    .playlist-item{width:33.3%;} 
} 

私はここで例えば、ULリストを作っ： https://jsfiddle.net/n07znakb/4/