根据浏览器的窗口大小调整边距

Question

我有一系列滚动水平布局的图像。图像之间有一段距离。我正在使用一个jQuery脚本，负责根据浏览器的窗口大小来调整图像大小。我的问题是，我怎样才能调整图像之间的边距呢？

我需要的设计是完全流畅的，所以在这种情况下媒体查询不是解决方案。

HTML：

<div id="page"> 
    <div id="header"> 
    </div> 
    <div id="slides"> 
     <div class="slide"><img src="image01.jpg" /></div> 
     <div class="slide"><img src="image02.jpg" /></div> 
     <div class="slide"><img src="image03.jpg" /></div> 
     .... 
     <div class="slide"><img src="imageN.jpg" /></div> 
    </div> 
    <div id="footer"> 
    </div> 
</div> 

CSS：

#slides { 
    width: 100%; 
    white-space: nowrap; 
} 

.slide { 
    display: inline-block; 
    margin-right: 20px; 
    vertical-align: top; 
} 

的jQuery：

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

    var $window = $(window), 
     $header = $('#header'), 
     $footer = $('#footer'); 

    var getHorizontalPageHeight = function() { 
     return $window.height() - $header.outerHeight() - $footer.outerHeight(); 
    }; 

    var $slides = $('#slides'), 
     $items = $slides.find('img, iframe'); 

    $items.each(function() { 
     var $item = $(this), 
      width = $item.data('width') || $item.attr('width') || 1, 
      height = $item.data('height') || $item.attr('height') || 1; 
     $item.data({ 
      height: height, 
      ratio: width/height 
     }); 
    }); 

    var resizer = function() { 

     var contentHeight = getHorizontalPageHeight(), 
      windowWidth = $window.width(), 
      windowHeight = $window.height(); 

     $items.each(function() { 

      var $item = $(this), 
       originalHeight = $item.data('height'), 
       height = contentHeight > originalHeight ? originalHeight : contentHeight, 
       width, 
       ratio = $item.data('ratio'); 

       width = height * ratio; 

       $item.css({ 
        width: width, 
        maxWidth: 'none', 
        height: width/ratio 
       }); 

     }); 

    }; 

    $window.on('resize', resizer); 
    resizer(); 

}); 

在此先感谢

Answer 1

，如果你不希望使用MediaQ公司，你可以用百分比margin-right:2%。该2%取决于调整窗口大小（它会变得越来越小的窗口变小）

看到这里jsfiddle width percentage

代码：

.slide { 
display: inline-block; 
margin-right: 2%; 
vertical-align: top; 
height:100px; 
background:red; 
width:20% 
} 

或者你可以使用vw这意味着视（窗口）宽度。其中100vw是最大值和0vw分。那么margin-right:2vw将再次增加或减少，这取决于窗口的宽度。

看到这里jsfiddle with vw

代码：

.slide { 
display: inline-block; 
margin-right: 2vw; 
vertical-align: top; 
height:100px; 
background:red; 
width:20% 
} 

让我知道，如果这两个解决方案之一为你工作。

PS：我已经把那width和height到​​例如仅供参考

Answer 2

使用媒体查询

/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

}