如何使页面与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媒体查询。 这允许您为不同的屏幕宽度声明不同的样式。 你将能够做出类似的事情：

  

＆＃34;如果我的页面宽度小于XXX，则应将播放器放在此处   并取宽度XXX＆＃34;

例如：

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

    #sidebar{
        display: none;
    }
}