Адаптивный jQuery без window.matchMedia

И все-таки, узкое место в таком подходе — производительность .getComputedStyle()
Раз уж речь о переменных, то наверняка и какая-никакая система сборки имеется. В таком случае, имхо, самый роскошный вариант — подхватывать хэш, в котором хранятся диапазоны, и передавать его в тот-же webpack, например.

Адаптивный jQuery без window.matchMedia

А что, если сделать, например, вот так:

CSS (Stylus, Rupture):

body:after
	display block
	+above('s')
		content 's'
	+above('m')
		content 'm'
	+above('l')
		content 'l'

JS (ES6, JQuery):

$(window).on('resize', () => {
	console.log(window.getComputedStyle(document.body, ':after').getPropertyValue('content'));
});

Таким образом мы можем передать в js названия переменных, к которым привязан наш адаптив в css.