使用媒体查询使滑块响应

Question

这是一个页面：http://simply-black.stonerbunting.com

我正在努力让这个网站响应。我尝试了几个 Whosebug 解决方案以及其他解决方案，但主页上的滑块没有正确响应。

我试过使用这个 css:

.slider-wrapper .slider li .slide{
    height: 250px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.slider-wrapper{
    width: 100%;
    height: 473px;
}
.slider-wrapper .slider{
    width: 100%;
}
.slider-wrapper .slider li{
width: 100%;
}

它使用 jcarousel 自定义滑块。你能指引正确的方向吗？

感谢您的宝贵时间.. :)

Answer 1

不确定这对您的效果如何。我在 Firefox 中玩过它，似乎工作正常：

/* Breakpoint: 768px - Set to whatever value you want. You might want to duplicate this query and change the height of .slider-wrapper .slider li to target different screen resolutions */ 

@media (max-width: 768px) {

    .container { 
        padding: 0;
        width: 100%;
    }

    .slider-wrapper{
        width: 100% !important;
        height: auto;
    }

    .slider-wrapper .slider {
        width: 2000%;
    }

    .slider-wrapper .slider li {
        width: 5% !important;
        position: relative;
        min-height: 300px; /* change this to whatever value you want */
    }

    .slider-wrapper .slider li .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-size: cover;
    }

    /* Text */
    .slider-wrapper .slider li .overlay {
        width: 60%; /* change this to whatever value you want */
        top: 10%;
        /*display: none; */ /* uncomment display:none; to hide text on smaller screens if needed */
    }

    .slider-wrapper .slider li .overlay .text {
        padding: 10px;
    }

}

/* iPad - landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

    .slider-wrapper .slider li {
        min-height: 722px;
    }

}

/* iPad - Portrait */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    .slider-wrapper .slider li {
        min-height: 973px;
    }

    /* optional - make navbar reach the bottom of the page */
    .container { position: absolute !important; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }
    .navbar { height: 95% }

}

使用媒体查询使滑块响应

Make slider responsive using media query

html

css

jquery

slider

responsive-design