как сделать страницу похожей на страницу youtube?

Question

Я пытаюсь создать страницу, похожую на главную страницу YouTube, но с одним отличием (я использую салфетки для отображения следующих результатов на YouTube, нажимающих на видеоролики с данными о стрелках). моя проблема заключается в изменении размера. Я хочу сделать то же самое, что и на странице YouTube, и скрыть результаты относительно размера экрана.

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 
}); 
}); 

Swiper работает нормально, но кто-то имеет представление о том, как дисплей меньше результата на изменение размера в зависимости от размера экрана? Спасибо заранее.

Answer 1

Что вам нужно, это CSS Media Queries. Это позволяет объявлять разные стили для разных ширины экрана. Вы будете в состоянии сделать что-то вроде:

«Если моя ширина страницы меньше XXX, игрок должен быть помещен ЗДЕСЬ и принять ширину XXX»

Например:

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

    #sidebar{ 
     display: none; 
    } 
}