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

Question

我正在使用FlexSlider在响应式设计中显示多个170px宽的徽标。目前，滑块填充了包含在整个页面包装器中的包含div的流体宽度的100％，但是这经常导致半截图片。我希望滑块能够以固定宽度调整大小，以便徽标不会被剪切掉 - 桌面大小会显示5个徽标，平板电脑4等等。但是，媒体查询似乎并未影响它，所以我只剩下最初的宽度（850像素），这对于屏幕尺寸来说很快变得太大了。有什么我失踪？是否有可能混合流体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; 
    }); 

});