Question

我目前正在尝试使用不同数量的项目和宽度/边距创建响应式轮播，我正在使用Owl Carousel

Owl Carousel提供了一个很棒的选项，允许您以这种方式指定在特定屏幕尺寸下显示的项目数量：

carousel.owlCarousel({
    items : 4,
    itemsDesktop : [1100,3],
    itemsDesktopSmall : [700,2],
    itemsTablet: [600,2],
    itemsMobile : [400, 1]
});

因此，在窗口宽度为700到1100之间，旋转木马将显示3个项目。

这是我的轮播项目的基本结构。

<div class="owl-item">
    <div class="item">
        ITEM CONTENT
    </div>
</div>

由于某些样式要求，在.item

上需要有一个百分比的右手边距

我想使用媒体查询添加它，但是当JS测量窗口的宽度并且CSS媒体查询测量视口的宽度时，当存在滚动条时，我的JS中指定的值将不与CSS相关联媒体查询宽度。

有人能想到解决这个问题吗？（最好没有任何沉重的jquery）

使JS窗口宽度与CSS媒体查询视口宽度相对应

0 个答案: