REM-based adaptive solution for mobile

Adaptivejs principle:

利用rem布局，根据公式  html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度  计算html元素的font-size,使1rem等于100px,方便快速开发  开发时，一个div设计图宽度为89px,那么在css中我们可以这样书写：width:0.89rem;  

Github:https://github.com/finance-sh/adaptive

Adaptivejs Source:

(function(Win, Lib) {varDoc =win.document; varDocel =doc.documentelement; varDevicepixelratio =Win.devicepixelratio; varDPR = 1;//the correspondence between physical pixels and logical pixels    varscale = 1;//CSS Pixel zoom ratio    //Set Viewport    functionSetViewport () {DPR= 1; Win.devicepixelratiovalue=DPR; //win.devicepixelratio = win.devicepixelratio*win.devicepixelratio;Scale = 1/DPR; varMetael = doc.createelement (' meta '); Metael.setattribute (' Name ', ' viewport '); Metael.setattribute (' Content ', ' initial-scale= ' + scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no '); if(docel.firstelementchild) {docEl.firstElementChild.appendChild (Metael); }        Else {            varWrap = doc.createelement (' div ');            Wrap.appendchild (Metael);        Doc.write (wrap.innerhtml);    }} setviewport (); varNewbase = 100; functionSetrem () {varVisualview = Math.min (Docel.getboundingclientrect (). width, 540);//Visual Viewportnewbase = * Visualview/Lib.desinwidth; DocEl.style.fontSize= newbase + ' px '; }    varTid; Lib.desinwidth= 640; Lib.basefont= 18; Lib.init=function() {Win.addeventlistener (' Resize ',function() {cleartimeout (TID); Tid= SetTimeout (Setrem, 300); }, false); /*win.addeventlistener (' Onorientationchange ', function () {cleartimeout (TID);        Tid = SetTimeout (Setrem, 300); }, False);*/Win.addeventlistener (' Pageshow ',function(e) {if(e.persisted) {cleartimeout (TID); Tid= SetTimeout (Setrem, 300); }        }, false); if(Doc.readystate = = = ' complete ') {doc.body.style.fontSize= Lib.basefont * DPR + ' px '; }        Else{Doc.addeventlistener (' Domcontentloaded ',function(e) {doc.body.style.fontSize= Lib.basefont * DPR + ' px '; }, false);        } setrem (); Docel.setattribute (' DATA-DPR ', DPR); };}) (Window, window[' Adaptive ' | | (window[' adaptive ') = {});

Baidu's financial H5 Station we all use this way to develop, for example:
Page: https://8.baidu.com/template/index/current.html

Maximum benefits:

计算html元素的font-size,使1rem等于100px,方便快速开发  

Adaptivejs Adaptive Issues for mobile page development with REM

Page template initialization without setting the viewport tag, generated by JS.

We introduce JS at the top of the head tag and use it as follows

How to use:

Write the following code in the page head and update the HTML fontsize in real time:<script SRC="Js/adaptive.js"></script>Zoom, exact restore of design drawings<script SRC="Js/adaptive-version2.js"></script>A version that can be developed quickly without scaling<script>window[' Adaptivedesinwidth = 640; Design Drawing width window[ ' adaptive '].< Span class= "Pl-smi" >basefont = 18; Font size without scaling window[ ' adaptive ' ]. maxwidth = 480; Maximum page width default 540 window[ ' Adaptive ‘]. init (); //Call initialization method </script>   

Then set the appropriate style in the CSS:

. main-info {    height:0.88rem;    Padding-bottom:0.24rem;}. fund-info {    position:relative;    Font-weight:normal;    Padding:0.2rem 0;    Padding-right:1.7rem;    Padding-left:0.23rem;    Font-size:0.32rem;    Line-height:1;}

Note: If the width of the design is greater than the width of the document, 0.01rem will be less than 1px, so if the design is 1px, the CSS is still displayed in 1px.

Available Global variables: Window.devicepixelratiovalue the device pixel ratio of the current page setup

Optimize width issues

New maximum width to solve the problem of poor experience in flat panel or mobile phone landscape

window[' adaptive'.  Set maximum width, default 540px  

To use CSS together, add the following code:

Body {    6.4rem;//The design figure is 6.4 REM when the width is 640px, 750 is 7.5auto;} 6.4REM;//640px for 6.4REM, 750 for 7.5REM, etc.}       

REM-based mobile-adaptive solutions