在流体布局中使用媒体查询更改固定宽度 div

Question

我正在使用 FlexSlider 在响应式设计中显示多个 170 像素宽的徽标。当前，滑块填充包含 div 的流体宽度的 100%，它包含在整个页面包装器中，但这经常会导致图片被截断一半。我希望滑块以固定宽度调整大小，以便显示徽标而不会被切断 - 桌面尺寸将显示 5 个徽标，平板电脑 4 等。但是，媒体查询似乎并没有影响这一切，所以我只剩下原始宽度 (850px)，它很快就变得对屏幕尺寸来说太大了。有什么我想念的吗？是否可以像这样将流体 CSS 与固定宽度的项目混合？

滑块结构：

<div class="contentwrap">

[Omitted rest of the page content]

<div class="sliderwrap">
<div class="flexslider carousel">
<ul class="slides">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>

CSS:

.contentwrap {
width: 85.5%;
margin: 0 auto;}

.sliderwrap {
width: 850px;
margin: 0 auto;}

@media screen and (max-width: 659px) {
.contentwrap {
width: 100%; 
}

@media screen and (max-width: 169px) {
.sliderwrap {
display: none;
}

@media screen and (min-width: 170px) and (max-width: 339px) {
.sliderwrap {
width: 170px;
}


@media screen and (min-width: 340px) and (max-width: 509px) {
.sliderwrap {
width: 340px;
}

@media screen and (min-width: 510px) and (max-width: 794px) {
.sliderwrap {
width: 510px;
}

@media screen and (min-width: 795px) and (max-width: 995px) {
.sliderwrap {
width: 680px;
}

@media screen and (min-width: 170px) {
.sliderwrap {
width: 850px;
}

Answer 1

您必须使用 Carousel With Min & Max Ranges 示例 - http://jsfiddle.net/Luu3c2wk/

代码：

jQuery(document).ready(function($) {

    // store the slider in a local variable
    var $window = $(window),
    flexslider;

    // tiny helper function to add breakpoints
    function getGridSize() {
        return (window.innerWidth < 340) ? 1 :
            (window.innerWidth < 510) ? 2 :
            (window.innerWidth < 800) ? 3 :
            (window.innerWidth < 995) ? 4 : 5;
    }

    $('.flexslider').flexslider({
        selector: ".slides > div.flex-col",
        animation: "slide",
        animationLoop: false,
        itemWidth: 100,
        itemMargin: 0,
        minItems: getGridSize(), // use function to pull in initial value
        maxItems: getGridSize(), // use function to pull in initial value
        start: function(slider){
            flexslider = slider;
        }
    });

    // check grid size on resize event
    $window.on('resize', function() {
        var gridSize = getGridSize();

        console.log(gridSize);

        flexslider.vars.minItems = gridSize;
        flexslider.vars.maxItems = gridSize;
    });

});

在流体布局中使用媒体查询更改固定宽度 div

Changing fixed width div using media queries in fluid layout

css

slider

media-queries

fluid-layout

fixed-width