rem-combined SCSS Mobile Adaptive Starter Demo

<span id="Label3"></p><p><p>First of all, This article is suitable for the initial use of REM development mobile self-adaptive formula calculation deduction process, Master Detour.</p></p><p><p></p></p><p><p>Target size = rem * Root font size</p></p><p><p>Root font size = Scale value = Screen Size width/psd Draft size width</p></p><p><p>Target size = rem * Screen size WIDTH/PSD draft size width</p></p><p><p>PX = rem * (html root font px)</p></p><p><p></p></p><p><p>                                                                                                                                             HTML and Font browser support minimum 12 pixels, avoid too small weighting factor n </p></p><p>                                                                                                                                                                                                                                                                                   </p><p><p>Actual size actual Size screen Size width actual size screen size width * N actual size Screen size width</p></p><p><p>Target size = ————— * Root Font size = ——————— * —————————— = —————— * ———————————— = ——————— * ———————————————————————————</p></p><p><p>1 1 PSD Draft size WIDTH 1 * N PSD Draft size width A b (try to make the B value small so that the font will not be less than 12 pixels)</p></p><p><p></p></p><p><p>PSD Manuscript Size width = a * b;</p></p><p><p></p></p><p><p>Actual Size Screen Size width</p></p><p><p>Target size = —————— * ————————————</p></p><p><p>1 PSD Draft size width (640)</p></p><p><p>Take PSD 640 pixels for example</p></p><p><p></p></p><p><p>Actual Size Screen Size width</p></p><p><p>Target size = ——————— *-------————————</p></p><p><p>100 6.4 (640=100*6.4)</p></p><p><p>Back to the beginning</p></p><p><p>Target size = rem * Root font size</p></p><p><p>Combine the front-end precompiled tool SCSS to generate rem:</p></p><p><p>@function rem ($px) {</p></p><p><p>@return $px * (1/100) *1rem;</p></p><p><p>}</p></p><p><p>JS calculates the font size based on the screen width:</p></p><p><p>-set root element fontsize~</p></p><p><p>(function (doc, Win) {</p></p><p><p>var _root = doc.documentelement,</p></p><p><p>resizeevent = ' Orientationchange ' in window? ' Orientationchange ': ' resize ';</p></p><p><p>function Resizefont () {</p></p><p><p>var clientwidth = _root.clientwidth;</p></p><p><p>_root.style.fontsize = (clientwidth/6.4) + ' px ';</p></p><p><p>Console.log (' W: ' + clientwidth);</p></p><p><p>}</p></p><p><p>Win.addeventlistener (resizeevent, resizefont, false);</p></p><p><p>Doc.addeventlistener (' domcontentloaded ', resizefont, false);</p></p><p><p>}) (document, window);</p></p><p><p></p></p><p><p></p></p><p><p>--------------------extension-----------------------------------------------------------------------------------</p></p><p><p></p></p><p><p>Actual Size</p></p><p><p>Target size percentage = ————————————————</p></p><p><p>Context element Element dimensions</p></p><p><p></p></p><p><p>Reverse push</p></p><p><p>Actual Size</p></p><p><p>Rem = ——————</p></p><p><p>Root Font size</p></p><p><p>---------------------------------------------------------------------------------------------------------</p></p><p><p></p></p><p><p></p></p><p><p>Full Code Link:</p></p><pre><pre>href=<span style="color: #800000;">"</span><span style="color: #800000;">https://github.com/cantianshu/rem-and-scss-demo.git</span><span style="color: #800000;">"</span>></pre></pre><p><p></p></p><p><p>rem-combined SCSS Mobile Adaptive Starter Demo</p></p></span>