移動端佈局

1.滾動條默認是在html上的，移到body上

html{
   width: 100%;
   height: 100%;
   overflow: hidden;
}
body{
   width: 100%;
   height: 100%;
   overflow: auto;
}

2.高清屏1px邊框還原

//由於像素比是放大的，縮放比能夠縮小，只要相乘爲1就能獲得1px
var pixelRatio = 1 / window.devicePixelRatio;
//經過js動態設置視口的縮放比

document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + pixelRatio + ', maximum-scale=' + pixelRatio + ', minimum-scale=' + pixelRatio + ', user-scalable=no');

// 在devicePixelRatio = 3 時==>

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

3.使用單位

px絕對單位，任何狀況下都是固定值，在不一樣尺寸的屏幕下會錯位。

% 相對單位，相對於父級（自身）的大小進行計算。對於不太好肯定值的地方（如高度）很差使用百分比，會致使變形。

em相對單位，相對於當前字體大小的倍數。若是容器字體大小不同，一一修改很麻煩。

rem 相對單位，只相對於html（root元素）的字體大小，移動端瀏覽器都兼容，這種佈局比較通用。再在body裏把font-size復原。

   var html = document.getElementsByTagName('html')[0]; //屏幕寬度
   var pageWidth = html.getBoundingClientRect().width; // 屏幕寬度 / 平分塊數 = 基準值
   html.style.fontSize = pageWidth / 16 + "px"; //而後計算容器的rem數值，這樣不一樣的屏幕，容器佈局結構不會變。（即將整個屏幕均等分，再計算各容器的佔比。雖然屏幕大小不同，但容器佔屏幕的比例在各屏幕之間都同樣） //開發css時，使用sass定義的函數，不用每次都用計算器計算：@include dpr(60px,height);
//使用淘寶的flexible.js，給html元素增長[data-dpr='2']等屬性，再結合scss的函數生成不一樣屏幕的css代碼，完成移動端適配。

 

! function () {
  var innerStyle = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html {outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",
    createStyle = document.createElement("style");
  if (document.getElementsByTagName("head")[0].appendChild(createStyle),
    createStyle.styleSheet)
    createStyle.styleSheet.disabled || (createStyle.styleSheet.cssText = innerStyle);
  else
    try {
      createStyle.innerHTML = innerStyle;
    } catch (ex) {
      createStyle.innerText = innerStyle;
    }
}();
// 淘寶移動端Flexible佈局方案
! function (window, nameSpace) {
  var timer, doc = window.document,
    docEl = doc.documentElement, // html元素
    metaEl = doc.querySelector('meta[name="viewport"]'),
    flexibleEl = doc.querySelector('meta[name="flexible"]'),
    dpr = 0,
    scale = 0,
    Flexible = nameSpace.flexible || (nameSpace.flexible = {});
  //刷新rem
  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    width / dpr > 540 && (width = 540 * dpr);
    var rootSize = width / 10;
    docEl.style.fontSize = rootSize + "px",
      Flexible.rem = window.rem = rootSize;
  }
  if (metaEl) { //若是存在viewport meta標籤，則使用裏面的內容
    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));
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
    }
  }
  if (!dpr && !scale) {
    var isAndroid = window.navigator.appVersion.match(/android/gi);
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = window.devicePixelRatio;
    // 只對ios做了處理，android 採用1倍佈局
    if (isIPhone) {
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      dpr = 1;
    }
    scale = 1 / dpr;
  }
  if (docEl.setAttribute("data-dpr", dpr), !metaEl)
    if (metaEl = doc.createElement("meta"),
      metaEl.setAttribute("name", "viewport"), //j = scale            //j = scale              //j = scale
      metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"),
      docEl.firstElementChild)
      docEl.firstElementChild.appendChild(metaEl);
    else {
      var createDiv = doc.createElement("div");
      createDiv.appendChild(metaEl),
        doc.write(createDiv.innerHTML)
    }
  window.addEventListener("resize", function () {
    clearTimeout(timer),
      timer = setTimeout(refreshRem, 300);
  }, !1);
  window.addEventListener("pageshow", function (a) {
    a.persisted && (clearTimeout(timer),
      timer = setTimeout(refreshRem, 300))
  }, !1);
  "complete" === doc.readyState ? doc.body.style.fontSize = 12 * dpr + "px" : doc.addEventListener("DOMContentLoaded", function () {
    doc.body.style.fontSize = 12 * dpr + "px"
  }, !1);
  refreshRem();
  Flexible.dpr = window.dpr = dpr;
  Flexible.refreshRem = refreshRem;
  Flexible.rem2px = function (a) {
    var pxValue = parseFloat(a) * this.rem;
    return "string" == typeof a && a.match(/rem$/) && (pxValue += "px"), pxValue;
  };
  Flexible.px2rem = function (a) {
    var remValue = parseFloat(a) / this.rem;
    return "string" == typeof a && a.match(/px$/) && (remValue += "rem"), remValue;
  }
}(window, window.lib || (window.lib = {}));

View Code

 

$browser-default-font-size: 75px;
// 根據dpr使用高清適配方案:適於須要寫死尺寸的元素，如font-size
// 一套scss代碼，生成適配3種dpr屏幕的css代碼
@mixin dpr($size:$browser-default-font-size, $type:'font-size') {
  #{$type}: $size;
  [data-dpr="2"] & {
    #{$type}: $size*2;
  }
  [data-dpr="3"] & {
    #{$type}: $size*3;
  }
}

// px轉rem：適於根據不一樣屏幕顯示不一樣尺寸的元素，如div的width
@function p2r($px, $base-font-size: $browser-default-font-size) {
  $value: $px / ($px*0+1); // 取無單位數值
  $base-font-size: $base-font-size / ($base-font-size*0+1); // 取無單位數值
  @return ($value / $base-font-size)* 1rem;
}

 

4.使用背景圖或者img，要針對不一樣的屏幕調整對應的大小：

　　若是圖片大小和容器大小一致，可使用width:100%。

　　若是圖片和容器大小不同，那麼需針對圖片分別設置寬/高，背景圖設置background-size(x baseRem,y baseRem)。

　　在物理像素和css像素不是1：1時，retina屏至關於放大，會添加中間色的像素，致使模糊。想要圖片不模糊失真，須要針對retina屏的圖片從新制做一張像素總數更多的圖片(2倍圖@2x)。

 

5.文字要測量行高，再算padding（rem）

6.文字前插入小圖標：

　　搜索框：div.search_box:before(圖標)+form input(padding-left)

      a標籤：a的background(圖標)+text-indent(文字)

7.<link rel='stylesheet'/>的媒體查詢只是規定了複合條件的媒體樣式表纔會生效，但不符合條件的樣式表依然會被下載到客戶端。

8.移動端fixed定位的元素中有input時，觸發鍵盤後會致使固定定位錯位，可使用絕對定位或者跳轉到別的頁面避免。

　　絕對定位會卡頓，須要用js解決，固定定位有兼容性問題

9.經常使用樣式調整

a{
    /*取消a標籤手指按下時出現的黑色遮罩層*/
    -webkit-tap-highlight-color:transparent;
    text-decoration:none;
}

input{
    /*去除IOS下表單元素圓角*/
    -webkit-apperance:none;
}