如何製作與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; 
    } 
}