移动端自适应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 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 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程序员编程注意事项
2008/04/10 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
js选择器全面解析
2016/06/27 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python正则分组的应用
2013/11/10 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python基础知识点 初识Python.md
2019/05/14 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Python类型转换的魔术方法详解
2020/12/23 Python
Python用Jira库来操作Jira
2020/12/28 Python
实现向右循环移位
2014/07/31 面试题
党支部创先争优承诺书
2014/08/30 职场文书
居安思危观后感
2015/06/11 职场文书
家长会后的感想
2015/08/11 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python