Wie man eine Seite ähnlich wie youtube Seite macht?

Question

Ich versuche eine Seite so zu gestalten, dass sie ähnlich ist wie die YouTube-Startseite, aber mit einem Unterschied (ich verwende einen Swipe, um die nächsten Ergebnisse in YouTube anzuzeigen. Klicken Sie auf die Pfeile, um Datenvideos zu ändern). Mein Problem ist die Größenänderung. Ich möchte dasselbe wie auf der YouTube-Seite machen und die Ergebnisse relativ zur Bildschirmgröße ausblenden.

HTML:

 <div class="borderbotom"> 
     <a href="#"class="resto">Restaurants</a> 
     <div class="swiper-container marginfromborder"> 
      <div class="swiper-wrapper"> 

       <div class="swiper-slide"> 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad"> 
         <div class="greydivresto"> 
          <img class="fwimgslider" alt="" src="../images/resto1.png"> 
          <p class="firsttext">The Northern Lights: Trip of a Lifetime</p> 
          <p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad"> 
         <div class="greydivresto"> 
          <img class="fwimgslider" alt="" src="../images/resto1.png"> 
          <p class="firsttext">The Northern Lights: Trip of a Lifetime</p> 
          <p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad"> 
         <div class="greydivresto"> 
          <img class="fwimgslider" alt="" src="../images/resto1.png"> 
          <p class="firsttext">The Northern Lights: Trip of a Lifetime</p> 
          <p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad"> 
         <div class="greydivresto"> 
          <img class="fwimgslider" alt="" src="../images/resto1.png"> 
          <p class="firsttext">The Northern Lights: Trip of a Lifetime</p> 
          <p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p> 
         </div> 
        </div> 

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

    </div> 

JS:

$(document).ready(function(){ 
    var swiper = new Swiper('.swiper-container', { 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    slidesPerView: 'auto', 
    centeredSlides: false, 
    spaceBetween: 10 
}); 
}); 

die swiper funktioniert gut, aber jeder hat eine Vorstellung davon, wie eine Anzeige weniger Ergebnis auf Resize auf die Bildschirmgröße abhängig? Vielen Dank im Voraus.

Answer 1

Was Sie brauchen, ist CSS Media Queries. Hiermit können Sie verschiedene Stile für unterschiedliche Bildschirmbreiten deklarieren. Sie werden in der Lage sein, etwas zu machen wie:

„Wenn meine Seitenbreite als XXX weniger ist, sollte der Spieler HIER platziert werden und die Breite XXX nehmen“

Zum Beispiel:

@media (max-width:1024px){ 
    #player{ 
     width: 100%; 
    } 

    #sidebar{ 
     display: none; 
    } 
}