К счастью, есть более подходящий способ. Впервые я познакомился с ним на сайте Джереми Кейта (Jeremy Keith) http://adactio.com/journal/5429/.

Полный код можно найти в каталоге example_10-01. Суть в том, что в CSS вставляется нечто такое, что может быть легко считано и правильно воспринято кодом JavaScript.

Рассмотрим этот прием в CSS:

@media (min-width: 20rem) {

body::after {

content: 'Splus';

font-size: 0;

}

}

@media (min-width: 47.5rem) {

body::after {

content: 'Mplus';

font-size: 0;

}

}

@media (min-width: 62.5rem) {

body::after {

content: 'Lplus';

font-size: 0;

}

}

В каждом брейкпоинте, который мы хотим связать с JavaScript, используется псевдоэлемент after (можно использовать и before, так как подойдет любой из них) и указывается содержимое этого псевдоэлемента для именования брейкпоинта. В предыдущем примере я использовал Splus для экранов не меньше меньших, Mplus — для экранов не меньше средних и Lplus — для экранов не меньше больших. Здесь можно использовать любые значимые имена и изменять значения там, где есть смысл (использовать другие показатели ориентации, высоты, ширины и т.д.).