css3/sass little weird units of rem? ( css3 of rem not working?)
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var scale = 1 / window.devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>//scss


$baseFontSize : 75;
@function r( $px ){
 @return $px/$baseFontSize + rem;
}

body {
 font-family: Roboto-Regular, Helvetica, STHeiTi, sans-serif;
 line-height: 1.2;
}
.text{
 font-size: r(20);
}
.s_a{
 text-align: center;
 font-size: r(10);
}
.s_b{
 font-size: r(20);
}
.s_c{
 font-size: r(28);
} </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"&gt;
  &lt;title&gt;index&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class='text'&gt;Sed sit amet sem nec nisi sodales laoreet at et&lt;/div&gt;

  &lt;div class="s_a"&gt;New juanpi special&lt;/div&gt;
  &lt;p class="s_b"&gt;75% off·shipping·Limited quantity&lt;/p&gt;
  &lt;div class="s_c"&gt;&lt;a href="baidu.com"&gt;See more details on the App&lt;/a&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>class to 'text' elements set 'font-size: r (30);' and 'font-size: r (20);' after other page elements fontSize performance is completely different, and why?</p>

<p>This also occurs if you delete the class is 's_c' element inside the 'a' label.</p>

<p>I need your help! :(</p>