移动端自适应flexible.js怎么用

这篇文章将为大家详细讲解有关移动端自适应flexible.js怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司主要从事网站设计、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务安福,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

第一步:

下载 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中引入

项目结构

移动端自适应flexible.js怎么用



 
  
  
  
  
  Document
  
  
 
 
  
   首页
  
 

第三步

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

第四步

看效果

移动端自适应flexible.js怎么用

关于“移动端自适应flexible.js怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享名称:移动端自适应flexible.js怎么用
文章路径:http://ybzwz.com/article/jgsdgg.html

其他资讯