H5 Mobile End Flexible source adaptation terminal interpretation and common sass functions

;(function(Win, Lib) {vardoc = win.document;//win = Window,lib = Window.lib;    varDocel =doc.documentelement; varMetael = Doc.queryselector (' meta[name= "viewport"]); varFlexibleel = Doc.queryselector (' meta[name= "flexible"]);//This kind of writing has not been tried    varDPR = 0; varScale = 0; varTid; varFlexible = Lib.flexible | | (lib.flexible = {}); //Create a META:VP, and set the value of DPR based on the device screen pixel ratio, set the scale =1/DPR, retain 2 digits after the decimal point;    //after the META tag has been set, it is set according to its custom zoom-in ratio    if(Metael) {Console.warn (' Scaling is set according to the existing META tag '); varMatch = Metael.getattribute (' content '). Match (/initial\-scale= ([\d\.] +)/); if(match) { scale= Parsefloat (match[1]); DPR= parseint (1/scale);//get screen pixel ratio        }    } Else if(flexibleel) {varContent = Flexibleel.getattribute (' content '); if(content) {varINITIALDPR = Content.match (/initial\-dpr= ([\d\.] +)/); varMAXIMUMDPR = Content.match (/maximum\-dpr= ([\d\.] +)/); if(INITIALDPR) {DPR= Parsefloat (initialdpr[1]); Scale= Parsefloat ((1/DPR). toFixed (2)); //3.1415.toFixed (2), reserved 2 decimal places            }            if(MAXIMUMDPR) {DPR= Parsefloat (maximumdpr[1]); Scale= Parsefloat ((1/DPR). toFixed (2)); }        }    }    //when the META tag is not set, the screen zoom ratio is set according to the device information    if(!DPR &&!)Scale ) {        varIsandroid = Win.navigator.appVersion.match (/android/gi); varIsiphone = Win.navigator.appVersion.match (/iphone/gi); varDevicepixelratio =Win.devicepixelratio; if(isiphone) {//iOS, for 2 and 3 screen, with twice times the scheme, the remaining 1 time times the scheme            if(Devicepixelratio >= 3 && (!DPR | | DPR >= 3) ) {DPR= 3; } Else if(Devicepixelratio >= 2 && (!DPR | | DPR >= 2) ) {DPR= 2; } Else{DPR= 1; }        } Else {            //Other devices, still using 1 time times the scheme, but FS is not a fixedDPR = 1; } Scale= 1/DPR; }    //set custom properties for a document, save DPR valuesDocel.setattribute (' DATA-DPR ', DPR); //Create a META tag, set the initial, minimum, and maximum ratios to be scale values and insert them into the page    //Setting the zoom ratio, the equivalent of this screen is rendered on top of a magnified canvas.     if(!Metael) {Metael= 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{//It 's not going to work .            varWrap = doc.createelement (' div ');            Wrap.appendchild (Metael);        Doc.write (wrap.innerhtml); }    }    //Customize the FontSize of page elements for easy REM configuration    functionRefreshrem () {varwidth =docel.getboundingclientrect (). width; //screen information, screen width, bound: binding; Rect: Rectangle        if(WIDTH/DPR > 640) {width= 640 *DPR; }        varrem = WIDTH/10;//It was originally ten .docEl.style.fontSize = rem + ' px '; Flexible.rem= Win.rem =REM; }    /** * For the design of 320px, the root element fontsize = 32px;     * For the design of 1080px, the root element fontsize = 108px;     * The width of the screen is W (rem*10), the design size is W, then the proportional relationship w:rem*10 = x:1;     * ==> x= w/(rem*10), (unit) * Then any design draft size L converted to the corresponding size is: l/x = (l*rem*10)/w;     * Because REM is set to the root element, all dimensions can be manipulated in rem units;     * Xrem = (l*rem*10)/w*fontsize = (l*10)/w;     * Then in the design of the amount of L length, in the editor is (L*10/W) REM; * This completes the automatic adaptation of REM*/Win.addeventlistener (' Resize ',function() {cleartimeout (TID); Tid= SetTimeout (Refreshrem, 300); }, false); Win.addeventlistener (' Pageshow ',function(e) {if(e.persisted) {cleartimeout (TID); Tid= SetTimeout (Refreshrem, 300); }    }, false); //sets the font size of the body of the page, what is currently found to be used    if(Doc.readystate = = = ' complete ') {doc.body.style.fontSize= * DPR + ' px '; } Else{Doc.addeventlistener (' Domcontentloaded ',function(e) {doc.body.style.fontSize= * DPR + ' px '; }, false); }        //Page InitializationRefreshrem (); //provide some methodsFLEXIBLE.DPR = WIN.DPR =DPR; Flexible.refreshrem=Refreshrem; flexible.rem2px=function(d) {varval = parsefloat (d) * This. rem; if(typeofD = = = ' String ' && d.match (/rem$/) ) {Val+ = ' px '; }        returnVal; } Flexible.px2rem=function(d) {varval = parsefloat (d)/ This. rem; if(typeofD = = = ' String ' && d.match (/px$/) ) {Val+ = ' rem '; }        returnVal; }}) (Window, window[' Lib ' | | (window[' lib '] = {}));

//vue use sass need to install SASS, Sass-loader, Node-sass, Extract-text-webpack-plugin (allow Webpack to output CSS format files)// Mobile Sass Common Custom Function//component page call @include FONT-DPR (16px); font size is differentiated in different DPR; @mixin FONT-DPR ($font-size){font-size:$font-size;[data-dpr= "2"] & {font-size:$font-size * 2; }[data-dpr= "3"] &{font-size:$font-size * 3; }}//Reference Example: @include Clearfix (); clear floating @mixin clearfix (){&:before, &:after {content: "";Display:Table; }&:after{Clear:both; }}//Call Background:black (0.1); Custom function Settings transparent @function black ($opacity){@return Rgba (0, 0, 0, $opacity)}@function White ($opacity){@return Rgba (255, 255, 255, $opacity)}//Citation example: @include Box-shadowbox (0.8, 0.05); Inner and outer shadows @mixin Box-shadowbox ($opacity, $opacity 2){Box-shadow:White ($opacity) 0 1px 0, inset Black ($opacity 2) 0 1px 0; }///Example: @include regulatriangle (top,red), deltoid (dashed default transparent) @mixin Regulatriangle ($derection: Bottom, $color: #000, $ width:20px){@extend%trianglebase; Border-width:$width;//Right @if $derection ==right {border-style:dashed dashed dashed solid;Border-color:transparent transparent transparent $color; }//Left @if $derection ==left{Border-style:dashed solid dashed dashed;Border-color:transparent $color Transparent transparent; }//Up @if $derection ==top{Border-style:dashed dashed solid dashed;Border-color:transparent transparent $color transparent; }//Down @if $derection ==bottom{Border-style:solid dashed dashed dashed;Border-color:$color Transparent Transparent transparent; }}//Transparency call @include opacity (0.5) decimal; @mixin opacity ($opacity:){Opacity:$opacity/100;@if $filter {filter:Alpha (opacity= $opacity); }}//Component calls @include radius (5px); CSS3 prefix processing; @mixin prefix ($key, $value){-webkit-#{$key}: $value; -moz-#{$key}: $value; -o-#{$key}: $value; #{$key}: $value;} @mixin radius ($value){//round @include prefix (Border-radius, $value);}//Use @include Px2rem (line-height), @include px2rem (margin, 40 0); any attribute and any value @mixin px2rem ($property, $values, $ baseline-rem:75){$max:Length ($values);//Returns the length value of the $values list $pxValues:"';$remValues:"';@for $i from 1 through $max {$value:(Nth ($values, $i));$remValues:#{$remValues + $value/$baseline-rem}REM; @if $i < $max{$remValues:#{$remValues + ""}; }  }  #{$property}: $remValues;} //Note: Universal can be written @mixin//Custom variable $COLD50: #db1d50; $colhywk: #fe6733; $width: 1200px; //sass has two types of annotations, one of which is the standard CSS annotation method /* */ , the other is a single-line comment in the form of a//double-diagonal bar, but this single-line comment is not translated %ir{Color:Transparent;Text-shadow:None;Background-color:Transparent;Border:0;}The  //placeholder selector is defined as the% identity, and the advantage of calling this selector through @extend is that there will be no redundant CSS files if not called, avoiding the many basic styles that were previously predefined in some of the underlying files #header{h1{@extend%ir; Width:300px; }}
Sass function uses REM; Call: Width:pxtorem (100px); @function Pxtorem ($px){$rem:37.5 @return ($px/$rem) + REM;}

H5 Mobile End Flexible source adaptation terminal interpretation and common sass functions