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

 https://8.baidu.com/template/index/current.html   of the wealth management of Baidu

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:

In the page head, write the following code to update the HTML fontsize in real time:<ScriptSrc="Js/adaptive.js" ></script>//Zoom, exact restore design <script src= "js/adaptive-version2.js" > </script>//no scaling, can quickly develop version < Script> Window[ ' adaptive '].desinwidth = 640 ; //design width window[ ' adaptive '].basefont = 18;//does not scale when the font size Window[ ' adaptive '].maxwidth = 480;//page maximum 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[//Set maximum width, default 540px

To use CSS together, add the following code:

Body {    //Design width 640px is 6.4rem, 750 is 7.5rem, and so on    auto;} Body * {    //Design width 640px is 6.4rem, 750 is 7.5rem, etc.}  

REM-based adaptive solution for mobile