Mobile End cloth REM

one, preferably with no one

http://www.jianshu.com/p/b00cd3506782

Although the blogger says the scheme has expired, but the new plan has not yet been understood.

You can modify 640 to 750 according to the width of your usual design manuscript.

<! DOCTYPE html>   (function(Doc, win) {varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function () {                varClientWidth =Docel.clientwidth; if(!clientwidth)return; if(clientwidth>=640) {docEl.style.fontSize= ' 100px '; }Else{docEl.style.fontSize= * (clientwidth/640) + ' px ';        }            }; if(!doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false); }) (document, window);</script>/*The resources you have introduced*/<title> title </title> /*Your code*/</body>_minooo_ Link: http://www.jianshu.com/p/b00cd3506782Source: Jane Book copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source. 

Second, HD solutions

HD solution is based on the device screen DPR (device pixel ratio, also known as dppx, such as dpr=2, said 1 css pixels are composed of 4 physical pixel points) * * Dynamically set the HTML font-size, and according to the device DPR adjust the scale of the page to achieve high-definition effect * *.

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.

Attention:

• REM is suitable for writing fixed dimensions. The rest is replaced by flex or percent as needed.
• In the X5 kernel browser, the font will be automatically enlarged, the solution:

{ max-height:}

• If the width of the element exceeds half of the width (640 or 750 width), use the percent width or flex layout decisively.

Otherwise, there may be a horizontal scroll bar.

' Use strict ';/** * @param {Boolean} [normal = false]-page compression is turned on by default to make the page HD; * @param {Number} [basefontsize = 100]-basic fontsize, default 100px; * @param {Number} [Fontscale = 1]-some businesses want to enlarge a certain proportion of the font; */Const WIN=Window;exportdefaultWin.flex = (normal, basefontsize, fontscale) = ={Const _basefontsize= Basefontsize | | 100; Const _fontscale= Fontscale | | 1; Const DOC=win.document; Const UA=navigator.useragent; Const matches= Ua.match (/android[\s\s]+applewebkit\/(\d{3})/i); Const Ucversion= Ua.match (/u3\/(\d+|\.) {5,}) /i); Const ISUCHD= Ucversion && parseint (Ucversion[1].split ('. '). Join ('), >= 80; Const Isios= Navigator.appVersion.match (/(Iphone|ipad|ipod)/gi); Let DPR= Win.devicepixelratio | | 1; if(!isios &&!) (Matches && matches[1] > 534) &&!isuchd) {    //If non-iOS, non-Android4.3, non-UC kernel, do not perform HD, DPR set to 1;DPR = 1; } Const Scale= Normal? 1:1/DPR; Let Metael= Doc.queryselector (' meta[name= "viewport"] '); if(!Metael) {Metael= Doc.createelement (' meta '); Metael.setattribute (' Name ', ' viewport ');  Doc.head.appendChild (Metael); } metael.setattribute (' Content ', ' width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale} '); Doc.documentElement.style.fontSize= Normal? ' 50px ': ' ${_BASEFONTSIZE/2 * DPR *_fontscale}px ';}; _minooo_ Link: http://www.jianshu.com/p/985d26b40199Source: Jane Book copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source. 

Mobile End cloth REM