移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐


Posted in Javascript onApril 02, 2019

第一步:

下载 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的使用方法(不用三大框架,仅写一个单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;
 }
}

第四步

看效果

移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐

以上所述是小编给大家介绍的移动端自适应flexible.js使用方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
原生JS实现幻灯片
Feb 22 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 #Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 #Javascript
详解vue后台系统登录态管理
Apr 02 #Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 #Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 #Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 #Javascript
基于Vue插入视频的2种方法小结
Apr 02 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php输入数据统一类实例
2015/02/23 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python实现的购物车功能示例
2018/02/11 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
网络教育自我鉴定
2013/11/01 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
药品业务员岗位职责
2014/04/17 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
银行稽核岗位职责
2015/04/13 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
周末问候语大全
2015/11/10 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
详解java如何集成swagger组件
2021/06/21 Java/Android
分享Python异步爬取知乎热榜
2022/04/12 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python