如何制作与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 
}); 
}); 

的刷卡工作正常，但任何人有一个想法如何显示上较少依赖于屏幕尺寸大小调整的结果？ 在此先感谢。

Answer 1

您需要的是CSS Media Queries。 这允许您为不同的屏幕宽度声明不同的样式。 您将能够制造类似：

“如果我的页面宽度小于XXX，玩家应该放在这里 并采取宽度XXX”

例如：

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

    #sidebar{ 
     display: none; 
    } 
}