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

时间:2013-10-14 17:10:04

标签: javascript jquery css media-queries carousel

我目前正在尝试使用不同数量的项目和宽度/边距创建响应式轮播,我正在使用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)

0 个答案:

没有答案