流体レイアウトのメディアクエリを使用して固定幅divを変更する

Question

Flexsliderを使用してレスポンシブデザインに複数の170ピクセル幅のロゴを表示しています。現在、スライダは、ページラッパー全体に含まれる包含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; 
    }); 

});