h5移動端flexible源碼適配終端解讀以及常用sass函數

標籤：att   body   als   注釋   sip   兩種   initial   自訂函數   3.1   

;(function(win, lib) {    var doc = win.document;// win = window,lib = window.lib;    var docEl = doc.documentElement;    var metaEl = doc.querySelector(‘meta[name="viewport"]‘);    var flexibleEl = doc.querySelector(‘meta[name="flexible"]‘);//這樣的寫法沒有嘗試過    var dpr = 0;    var scale = 0;    var tid;    var flexible = lib.flexible || (lib.flexible = {});        //建立meta:vp,並根據裝置螢幕像素比來設定dpr的值，設定scale =1/dpr,保留小數點後2位;    // 當設定過meta標籤之後，其根據其自訂的縮放放比來設定    if (metaEl) {        console.warn(‘將根據已有的meta標籤來設定縮放比例‘);        var match = metaEl.getAttribute(‘content‘).match(/initial\-scale=([\d\.]+)/);        if (match) {            scale = parseFloat(match[1]);            dpr = parseInt(1 / scale);//擷取螢幕像素比        }    } else if (flexibleEl) {        var content = flexibleEl.getAttribute(‘content‘);        if (content) {            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);            if (initialDpr) {                dpr = parseFloat(initialDpr[1]);                scale = parseFloat((1 / dpr).toFixed(2));                   //3.1415.toFixed(2),保留2位小數點            }            if (maximumDpr) {                dpr = parseFloat(maximumDpr[1]);                scale = parseFloat((1 / dpr).toFixed(2));                }        }    }    //當沒有設定meta標籤之後，根據裝置資訊來設定螢幕縮放比    if (!dpr && !scale) {        var isAndroid = win.navigator.appVersion.match(/android/gi);        var isIPhone = win.navigator.appVersion.match(/iphone/gi);        var devicePixelRatio = win.devicePixelRatio;        if (isIPhone) {            // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                                dpr = 3;            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){                dpr = 2;            } else {                dpr = 1;            }        } else {            // 其他裝置下，仍舊使用1倍的方案，但是fs並不是固定的            dpr = 1;        }        scale = 1 / dpr;    }    //給文檔設定自訂屬性，儲存dpr的值    docEl.setAttribute(‘data-dpr‘, dpr);    //建立meta標籤，設定初始比、最小比和最大比均為scale值，並將其插入到頁面    //設定了縮放比，那麼相當於這個螢幕渲染在一個被放大的畫布之上。    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 {//並沒有什麼作用            var wrap = doc.createElement(‘div‘);            wrap.appendChild(metaEl);            doc.write(wrap.innerHTML);        }    }    // 自訂頁面元素的fontsize，方便rem的配置    function refreshRem(){        var width = docEl.getBoundingClientRect().width;        //螢幕資訊，螢幕寬度，bound：綁定；rect：矩形        if (width / dpr > 640) {            width = 640 * dpr;        }        var rem = width / 10;  //原本是10        docEl.style.fontSize = rem + ‘px‘;        flexible.rem = win.rem = rem;    }    /**     * 對於設計稿為320px的，根項目fontsize = 32px;     * 對於設計稿為1080px的，根項目fontsize = 108px;     * 設螢幕的寬度為w(rem*10),設計稿尺寸為w,那麼有比例關係w:rem*10 = x:1 ;     * ==> x= w/(rem*10);（單位）     * 那麼任意設計稿尺寸 L 轉化為相應的尺寸就為：L/x = (L*rem*10)/w;     * 由於rem設定給根項目了，那麼所有的尺寸均可以用rem單位來操作;     * xrem = (L*rem*10)/w*fontsize = (L*10)/w;     * 那麼在設計稿中量取 L長度的，在編輯器中就為(L*10/w) rem;     * 如此便完成了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);    // 設定頁面的body的字型 大小 ，目前發現有何用    if (doc.readyState === ‘complete‘) {        doc.body.style.fontSize = 12 * dpr + ‘px‘;    } else {        doc.addEventListener(‘DOMContentLoaded‘, function(e) {            doc.body.style.fontSize = 12 * dpr + ‘px‘;        }, false);    }        // 頁面初始化     refreshRem();    // 提供一些方法    flexible.dpr = win.dpr = dpr;    flexible.refreshRem = refreshRem;    flexible.rem2px = function(d) {        var val = parseFloat(d) * this.rem;        if (typeof d === ‘string‘ && d.match(/rem$/)) {            val += ‘px‘;        }        return val;    }    flexible.px2rem = function(d) {        var val = parseFloat(d) / this.rem;        if (typeof d === ‘string‘ && d.match(/px$/)) {            val += ‘rem‘;        }        return val;    }})(window, window[‘lib‘] || (window[‘lib‘] = {}));

//vue使用sass需要安裝sass、sass-loader、node-sass、extract-text-webpack-plugin(讓webpack可以輸出css格式的檔案)//移動端sass常用自訂函數//組件頁面調用 @include font-dpr(16px);字型在不同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;    }}//引用例子：@include clearfix();清除浮動  @mixin clearfix() {      &:before,      &:after {          content: "";          display: table;      }      &:after {          clear: both;      }  }  //調用background:black(0.1);自訂函數設定透明@function black($opacity) {      @return rgba(0, 0, 0, $opacity)  }    @function white($opacity) {      @return rgba(255, 255, 255, $opacity)  }//引用例子:@include box-shadowbox(0.8, 0.05);  內陰影和外陰影@mixin box-shadowbox($opacity, $opacity2) {      box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;  }  //例子：@include regulaTriangle(top,red);正三角(dashed預設透明) @mixin regulaTriangle($derection:bottom, $color: #000, $width: 20px) {      @extend %triangleBase;      border-width: $width;      //向右      @if $derection==right {          border-style: dashed dashed dashed solid;          border-color: transparent transparent transparent $color;      }      //向左      @if $derection==left {          border-style: dashed solid dashed dashed;          border-color: transparent $color transparent transparent;      }      //向上      @if $derection==top {          border-style: dashed dashed solid dashed;          border-color: transparent transparent $color transparent;      }      //向下      @if $derection==bottom {          border-style: solid dashed dashed dashed;          border-color: $color transparent transparent transparent;      }  }  //透明度 調用@include opacity(0.5)小數;@mixin opacity($opacity:50) {  opacity: $opacity / 100;  @if $filter{    filter: alpha(opacity=$opacity);  }}//組件調用@include radius(5px);css3首碼處理；@mixin prefix($key , $value){  -webkit-#{$key}: $value;  -moz-#{$key}: $value;  -o-#{$key}: $value;  #{$key}: $value;}@mixin radius($value){ //倒圓角    @include prefix(border-radius,$value);}//使用@include px2rem(line-height, 22); @include px2rem(margin, 40 0);任意屬性和任意值@mixin px2rem($property, $values,$baseline-rem:75) {  $max: length($values);//返回$values列表的長度值  $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;}//註：通用的都可以寫成@mixin//自訂變數$cold50:#db1d50;$colhywk: #fe6733;$width:1200px;//sass有兩種注釋方式，一種是標準的css注釋方式 /* */，另一種則是 //雙斜杆形式的單行注釋，不過這種單行注釋不會被轉譯出來%ir{  color: transparent;  text-shadow: none;  background-color: transparent;  border: 0;}//佔位選取器以 %標識定義，通過 @extend調用這種選取器的優勢在於：如果不調用則不會有任何多餘的css檔案，避免了以前在一些基礎的檔案中預定義了很多基礎的樣式#header{  h1{    @extend %ir;    width:300px;  }}
//sass函數結合使用rem；調用：width:pxTorem(100px);@function pxTorem($px){   $rem:37.5   @return ($px / $rem)+ rem;}

 

h5移動端flexible源碼適配終端解讀以及常用sass函數