快捷導(dǎo)航

移動(dòng)端自適應(yīng)flexible.js的使用方法(不用三大框架，僅寫(xiě)一個(gè)單html頁(yè)面使用）推薦

更新時(shí)間：2019年04月02日 11:27:27 作者：人間草木96

這篇文章主要介紹了移動(dòng)端自適應(yīng)flexible.js使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

第一步：

下載 flexible.js，代碼如下，可以復(fù)制過(guò)去用

;(function(win, lib) {
 var doc = win.document
 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 = {})
 
 if (metaEl) {
  console.warn('將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例')
  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 = win.navigator.appVersion.match(/android/gi)
  var isIPhone = win.navigator.appVersion.match(/iphone/gi)
  var devicePixelRatio = win.devicePixelRatio
  if (isIPhone) {
   // iOS下，對(duì)于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 {
   // 其他設(shè)備下，仍舊使用1倍的方案
   dpr = 1
  }
  scale = 1 / dpr
 }
 
 docEl.setAttribute('data-dpr', dpr)
 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)
  }
 }
 
 function refreshRem() {
  var width = docEl.getBoundingClientRect().width
  if (width / dpr > 540) {
   width = 540 * dpr
  }
  var rem = width / 10
  docEl.style.fontSize = rem + 'px'
  flexible.rem = win.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
 )
 
 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'] = {}))

第二步：

在index.html中引入

項(xiàng)目結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <!-- 去掉meta，交給flexible.js自動(dòng)處理 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="./js/flexible.js"></script>
  <link rel="stylesheet" href="./css/index.css" rel="external nofollow" />
 </head>
 <body>
  <div class="wrap">
   <div class="title">首頁(yè)</div>
  </div>
 </body>
</html>

第三步

寫(xiě) less 轉(zhuǎn)換

需要安裝 Easy LESS 插件，幫助我們把 less 轉(zhuǎn)成 css

由于用了less，事先定義了一個(gè)變量 @font-size-base: 75; 來(lái)保存標(biāo)注稿基準(zhǔn)字體大小，淘寶 flexible.js 是基于750px設(shè)計(jì)稿來(lái)的

，所以 @font-size-base 為 75;

然后比如說(shuō)你測(cè)量 height: 98px; 那么就使用 height: 98rem / @font-size-base; 進(jìn)行換算

@font-size-base: 75;
html,
body {
 margin: 0;
 padding: 0;
}
.wrap {
 // width: 100%;
 .title {
  width: 100%;
  height: 98rem / @font-size-base;
  line-height: 98rem / @font-size-base;
  color: #fff;
  background: #e02222;
  text-align: center;
  font-size: 32rem / @font-size-base;
 }
}

第四步

看效果