Javascript 如何使页面与youtube页面相似？

我正试图设计一个与YouTube主页相似的页面，但有一点不同（我使用滑动在YouTube上显示下一个结果，点击箭头，视频数据会发生变化）。我的问题是调整大小，我想和YouTube页面上的一样，根据屏幕大小相对隐藏结果

HTML: swiper工作正常，但有人知道如何根据屏幕大小调整大小以减少显示结果吗？

---

提前感谢。

您需要的是CSS媒体查询。 这允许您为不同的屏幕宽度声明不同的样式。 您将能够制作如下内容：

“如果我的页面宽度小于XXX，则播放机应放置在此处 然后取宽度XXX“

例如：

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

    #sidebar{
        display: none;
    }
}

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

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

    #sidebar{
        display: none;
    }
}