Css Medienabfragen Prozent Breite

Question

I folgende Markup (für demostration vereinfacht) haben

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> 

Playlist-Gehalt ist die Breite der 1000px (die Playlist-Artikelnummer x Playlist-item Breite) , Habe ich das in Javascript gesetzt.

Wenn es 10 Wiedergabelisten-Elemente gäbe, wäre die Breite zum Beispiel 2000px.

Ich mag folgendes erreichen:

Wrapper max Breite 600px, 3 Playlist-Elemente sind sichtbar (das funktioniert) wenn die Wrapper Breite zwischen 600 und 400 Pixel ist, ich will Playlist Artikel 33,3% liegt Breite der Playlist-Inner (das ist die zweite obere Elternteil!), so 3 Playlist-Elemente sichtbar. Wenn die Breite des Wrappers unter 400px Breite liegt, möchte ich, dass die Wiedergabelisten-Elemente 50% der Breite der Wiedergabeliste-inner sind (was der zweite obere Parent ist!), Also 2 Playlist-Einträge sichtbar.

Ich weiß, dass ich das mit Javascript tun kann. Ich frage mich, ob ich es mit CSS alleine machen kann?

Mit aktuellen CSS funktioniert es nicht, da 33,3% width Einstellung übergeordnete Breite, die Wiedergabeliste-Inhalt ist, aber ich möchte 33,3% Breite von einem weiteren oberen Elternteil, die Wiedergabeliste ist.

Hoffentlich wird jemand verstehen.

Answer 1

Sie sollten von Handy und höher codieren. Und legen Sie den Wrapper relativ sein.

Also von 0px zu drastisch sein, möchten Sie die Playlist-Elemente 100%;

.playlist-item{width:100%;} 

von 400 und höher, möchten Sie 50%;

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

von 600 und höher, möchten Sie 33,3%;

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

Ich habe eine ul-Liste zum Beispiel hier: https://jsfiddle.net/n07znakb/4/