javascript - JS ウィンドウの幅を CSS メディア クエリのビューポート幅に対応させる

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なしで)