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

[BuccapuoH]

Если я правильно понял, то вы чтобы не писать ширину экрана в двух местах (CSS, JS), решили писать ее в трёх (CSS, JS, HTML).

И даже если отбросить идентификаторы c явным указанием ширины, всеравно нужно следить за тремя местами. Это при том, что использование разных идентификаторов сделает код сложным для понимания людьми, которые его не писали.

Подход рабочий, я не спорю, но ради одного IE9 (Caniuse CSS Media Queries и Caniuse window.matchMedia) изобретать такой велосипед — ИМХО не стоит.

[Lda]

Да, вы правы, задействовано теперь 3 области, вместо 2-х, но целью было избавиться от явных идентификаторов (как вы правильно заметили), мне так удобнее.

[k12th]

Непонятно, какой вообще use case: нормальные мобильные браузеры все вроде поддерживают matchMedia, а IE9 там нет. Если даже почему-то это нужно в IE9, то есть же полифилл.

.is(':visible')

Сурово. Насколько я помню, производительность у этого поделия совершенно чудовищная.

[Kenya]

Отказаться от явных идентификаторов в js и добавить явные идентификаторы в html — выгода все же сомнительная чутка

[Lda]

Вы не правильно поняли, явное указание диапазонов в моем примере есть только в одном месте — CSS, маркеры мы добавляем 1 раз, 1 раз пишем код скриптов и изменяя в будущем диапазон размера экрана не возвоащаемся ни в html ни в скрипты, все и так будет работать.

[justboris]

чтобы это было понятнее, можно классы назвать max_width_mobile, max_width_tablet, а не max_width_479 и max_width_800

[Lda]

Можно, но я пытался сохранить связь с изначальными медиа-запросами, для сквозного понимания.

[Lda]

P.s. Нет никакой разницы для чего используются медиа-запросы, платформа может не меняться.

[Mr_Boombastic]

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

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.

[Lda]

Смысл сильно не меняется, как я и указал в статье, в роли маркера может выступать реальная конструкция верстки.

[sashamorozov]

Пока создавал своё небольшое решение подобной проблемы вы меня опередили :)

Но вот мой рабочий вариант: JSFiddle

Плюс, что не надо плодить и контролировать элементы в DOM, и с учетом mobile first вообще никаких проблем нет с определением min-width или max-width.

[Lda]

Да, можно так, я намеренно упростил все для описания сути приема.

[Mr_Boombastic]

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