CSS: динамические классы / атрибуты и медиа-запросы — как решить эту дилемму?

Написание расширения для плагина У меня есть возможность изменить все атрибуты элемента HTML с помощью PHP.

$attributes["style"] .= 'padding-left:10px;';
array_push($attributes["class"], "long-container");
array_push($attributes["class"], "super smooth");
$attributes["data-whatever"] = "great";

Теперь я хочу дать пользователю возможность динамически вводить соотношение ширины / высоты div (решение о том, как это сделать, описано в ответе @Web_Designer здесь: Поддерживать соотношение сторон div с CSS).

В функции, где я могу изменить вывод стороннего плагина, я написал следующий код для вычисления отношения высоты к ширине в соответствии с вводом. Как высота моих ящиков:

if( !empty( $args['stretchy-desktop'] ) ) {
$sd = array_map('trim',explode(":",$args['stretchy-desktop']));

if(count($sd)==2) {
$sd[0] = floatval(str_replace(",",".",$sd[0]));
$sd[1] = floatval(str_replace(",",".",$sd[1]));

if($sd[0]>0 && $sd[1]>0) {
$padding = ($sd[1] / $sd[0])*100;
array_push($attributes['class'], 'stretchy-desktop');
$attributes['style'] .= 'padding-bottom:'.$padding.'%;';
}
}
}

Отлично верно? Однако теперь пользователь хочет ввести различное соотношение веса и роста для мобильных устройств, а также различная динамическая минимальная высота для мобильных устройств и это там я застрял.

1) Невозможно дать встроенные запросы @media прямо сейчас, иначе мое решение было бы таким (Можно ли встроить правила CSS @media?):

$attributes['style'] .= '@media (min-width:540px) {padding-bottom:'.$padding.'%;}@media (max-width:539px) {padding-bottom:'.$padding_mobile.';}';

2) В настоящее время невозможно использовать значения атрибутов HTML в CSS (Значения CSS с использованием атрибута данных HTML5) в противном случае мое решение будет таким:

$attributes['data-desktoppadding'] = $padding;
$attributes['data-mobilepadding'] = $padding_mobile;

В CSS:

@media (min-width:540px) {
.long-container {
padding-bottom: attr(data-desktoppadding);
}
}

@media (max-width:539px) {
.long-container {
padding-bottom: attr(data-mobilepadding);
}
}

3) Поскольку значения являются динамическими числами, я не могу определить класс CSS для каждого возможного существующего числа с плавающей точкой.

Конечно, я мог бы использовать JavaScript, но мы все знаем о существенных недостатках (включая ужасную загрузку страницы).

Можете ли вы придумать какое-нибудь решение CSS для этой дилеммы?