REM Mobile page Adaptive Perfect solution (up-to-date)

<! DOCTYPE html>"UTF-8"> <title></title> <script type="Text/javascript">!function (e) {function T (a) {if(I[a])returnI[a].exports; varn = i[a] ={exports: {}, Id:a, Loaded:!1                    }; returnE[a].call (N.exports, N, N.exports, t), n.loaded =!0, n.exports}vari = {}; returnT.M = e, t.c = i, T.P ="", T (0)} ([function (E, t) {"Use Strict"; Object.defineproperty (T,"__esmodule", {value:!0                }); vari =window; t["default"] = I.flex =function (E, t) {varA = e | | -, N= T | |1, R=i.document, O=Navigator.useragent, D= O.match (/android[\s\s]+applewebkit\/(\d{3})/i), l= O.match (/u3\/(\d+|\.) {5,})/i), C= L && parseint (l[1].split ("."). Join (""),Ten) >= the, P= Navigator.appVersion.match (/(Iphone|ipad|ipod)/gi), S= I.devicepixelratio | |1; P|| D && d[1] >534|| C | | (s =1); varU =1/s, M= R.queryselector ('meta[name= "Viewport"]'); M|| (M = r.createelement ("Meta"), M.setattribute ("name","Viewport"), R.head.appendchild (m)), M.setattribute ("content","width=device-width,user-scalable=no,initial-scale="+ U +", maximum-scale="+ U +", minimum-scale="+ u), r.documentelement.style.fontsize = A/2* S * n +"px"}, E.exports= t["default"]            }]); Flex ( -,1); </script> 
Note: Do not manually set viewport, the program automatically help you set!!!
Code principle
This is the Ali team's HD layout code, the so-called HD solution is based on the device screen DPR (device pixel ratio, also known as dppx, such as dpr=2, the 1 css pixels are composed of 4 physical pixel points) * * Dynamically set HTML font-size, At the same time, according to the device DPR adjust the zoom value of the page to achieve high-definition effect * *.
What's the advantage?
Simple referencing and easy layout
Automatically set the most appropriate HD zoom based on the DPR of the device screen.
Ensure the consistency of visual experience under different devices. (The old plan is that the larger the screen, the larger the element, the larger the screen, the more it looks)
Effectively solve the real 1px problem on mobile (1px is the physical pixel on the device screen)
How to use
Important thing to say three times!
Not every place. Rem,rem only applies to fixed size!
Not every place. Rem,rem only applies to fixed size!
Not every place. Rem,rem only applies to fixed size!
In a significant number of layout scenarios (such as the bottom navigation element dividing the screen width and the large size element), you must use a percentage or flex to perfectly layout!
See "Mobile phone page Adaptive solution-rem Layout" Friends, should have some understanding of REM, here no longer repeat,
This scheme is also the default 1rem = 100px, so when you layout, you can completely according to the designer to write to your various sizes.
For example, if you take a certain button element length 55px, Width 37px, then you can write the style directly:
. mybtn {
Width:0.55rem;
Height:0.37rem;
}
SOURCE Link: http://www.jianshu.com/p/985d26b40199

REM Mobile page Adaptive Perfect solution (up-to-date)