Javascriptを使用して画面サイズのメディアクエリを決定する

Question

Javascriptを使用して現在どのブレークポイント「モード」が設定されているかを簡単に判断する方法はありますか？

たとえば、私はSASSを使用して$ small-only、$ medium-onlyなどの変数に従って表示を設定しています。しかし、ユーザーがブラウザのサイズを変更し、$ small-onlyブレークポイントが使用されている場合、Javascriptでこれを照会できるようにしたいと思います。したがって、次のようなもの：

if ($small) { 
    // do something 
} else { 
    // do something different 
} 

Answer 1

var debouncer = (function() { 
 
    var timers = {}; 
 
    return function (callback, ms, uniqueId) { 
 
    if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; } 
 
    if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); } 
 
    timers[uniqueId] = setTimeout(callback, ms); 
 
    }; 
 
})(); 
 

 
function breakpointCheck() { 
 
    var $r = $(".responsiveChecker"); 
 
    
 
    if ($r.css("font-weight") === "500") { 
 
    return 5; 
 
    } else if ($r.css("font-weight") === "400") { 
 
    return 4; 
 
    } else if ($r.css("font-weight") === "300") { 
 
    return 3; 
 
    } else if ($r.css("font-weight") === "200") { 
 
    return 2; 
 
    } else if ($r.css("font-weight") === "100") { 
 
    return 1; 
 
    } 
 
} 
 

 
try { console.log("Breakpoint: " + breakpointCheck()); } catch(err) {} 
 

 
$(window).on("resize", function() { 
 
    debouncer(function() { 
 
    console.log("Breakpoint: " + breakpointCheck()); 
 
    }, 500); 
 
});

.responsiveChecker { 
 
    font-weight: 500; 
 
} 
 
@media (max-width: 1600px) { 
 
    .responsiveChecker { 
 
     font-weight: 400; 
 
    } 
 
} 
 
@media (max-width: 1120px) { 
 
    .responsiveChecker { 
 
     font-weight: 300 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .responsiveChecker { 
 
     font-weight: 200 
 
    } 
 
} 
 
@media (max-width: 374px) { 
 
    .responsiveChecker { 
 
     font-weight: 100 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="responsiveChecker"></div>

私は一緒に私はあなたが達成しようとしていると思う何のためcodepenを入れている：あなたは、このソリューションのためにhttps://codepen.io/MayhemBliz/pen/MOGMpW