使用流體佈局中的媒體查詢更改固定寬度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; 
    }); 

});