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

【问题标题】：Adjust margins depending on browser's window size根据浏览器的窗口大小调整边距
【发布时间】：2016-12-03 20:21:48
【问题描述】：

我有一系列滚动水平布局的图像。图像之间有一个边距。我正在使用一个 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();

});

提前致谢

【问题讨论】：

你的意思是像使用@media查询
您好，为您的图片设置一个固定的宽度和高度怎么样。示例类似这样的东西。它将根据父 div 的尺寸自动调整大小。我们那里的大多数开发人员都使用这种方法
使用 css (@media)
我想知道为什么在你的情况下媒体查询不起作用？您提到了必须坚持的流畅设计，但使用媒体查询不会破坏这一点，它是当今您最好的解决方案之一。

标签： jquery css margin image-resizing horizontal-scrolling

【解决方案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 是 max 和 0vw min 。同样，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 放到了 .slide 中，仅供参考

【讨论】：

使用视口单位是一个很好的解决方案，谢谢。虽然在我的情况下，我会使用 vh 单位，因为我需要根据窗口的高度来增加或减少边距。

【解决方案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) {

}

【讨论】：