title: CSS: Dynamic classes / attributes and media queries - how to solve this dilemma?
body: <p>Writing an extension for a Plugin I have the possibility to change all attributes of an HTML element using PHP.</p>
  
  <pre><code>$attributes["style"] .= 'padding-left:10px;';
  array_push($attributes["class"], "long-container");
  array_push($attributes["class"], "super smooth");
  $attributes["data-whatever"] = "great";
  </code></pre>
  
  <p>Now I want to give a user the possibility to enter the width / height ratio of a div dynamically (the solution of how to do this is described in the answer by @Web_Designer here: <a href="https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css">Maintain the aspect ratio of a div with CSS</a>).</p>
  
  <p>Within the function where I can change the output of the third-party Plugin I wrote the following code for calculating the width height ratio according to the input. As the height of my boxes is :</p>
  
  <pre><code>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]&gt;0 &amp;&amp; $sd[1]&gt;0) {
              $padding = ($sd[1] / $sd[0])*100;
              array_push($attributes['class'], 'stretchy-desktop');
              $attributes['style'] .= 'padding-bottom:'.$padding.'%;';
          }
      }
  }
  </code></pre>
  
  <p>Great right? However now the user wants a possibility to enter a <strong><em>different weight height ratio</em></strong> for mobile devices as well as a <strong><em>different dynamic min-height</em></strong> for mobile devices and this is there I am stuck.</p>
  
  <p><strong>1)</strong> It is not possible to give inline @media queries right now otherwise my solution would be like this (<a href="https://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline">Is it possible to put CSS @media rules inline?</a>):</p>
  
  <pre><code>$attributes['style'] .= '@media (min-width:540px) {padding-bottom:'.$padding.'%;}@media (max-width:539px) {padding-bottom:'.$padding_mobile.';}';
  </code></pre>
  
  <p><strong>2)</strong> It is not possible to use HTML attribute values in CSS right now (<a href="https://stackoverflow.com/questions/9523197/css-values-using-html5-data-attribute">CSS values using HTML5 data attribute</a>) otherwise my solution would be like this:</p>
  
  <pre><code>$attributes['data-desktoppadding'] = $padding;
  $attributes['data-mobilepadding'] = $padding_mobile;
  </code></pre>
  
  <p>In CSS:</p>
  
  <pre><code>@media (min-width:540px) {
  .long-container {
  padding-bottom: attr(data-desktoppadding);
  }
  }
  
  @media (max-width:539px) {
  .long-container {
  padding-bottom: attr(data-mobilepadding);
  }
  }
  </code></pre>
  
  <p><strong>3)</strong> As the values are dynamic numbers I can not define a CSS class for every possible existing float.</p>
  
  <p>Of course I could use JavaScript but we all know the significant drawbacks (including ugly page load).</p>
  
  <p>Can you think of any CSS solution for this dilemma?</p>