移動端自適應flexible.js的使用方法(不用三大框架，僅寫一個單html頁面使用）推薦

2019-11-19 11:54:21

字體：大中小

來源：轉載

供稿：網友

第一步：

下載 flexible.js，代碼如下，可以復制過去用

;(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('將根據已有的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 = 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倍的方案   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中引入

項目結構

<!DOCTYPE html><html lang="en"> <head>  <meta charset="UTF-8" />  <!-- 去掉meta，交給flexible.js自動處理 -->  <!-- <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">首頁</div>  </div> </body></html>

第三步

寫 less 轉換

需要安裝 Easy LESS 插件，幫助我們把 less 轉成 css

由于用了less，事先定義了一個變量 @font-size-base: 75; 來保存標注稿基準字體大小，淘寶 flexible.js 是基于750px設計稿來的

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

然后比如說你測量 height: 98px; 那么就使用 height: 98rem / @font-size-base; 進行換算

@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; }}

第四步

看效果