我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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

第一步:

下载 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怎么用

<!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 class="lazy" data-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怎么用

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

使用@media怎么实现移动端自适应样式

本篇文章给大家分享的是有关使用@media怎么实现移动端自适应样式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。通用手机端样式:@media all and (orientat
2023-06-08

使用html5怎么实现移动端自适应布局

这篇文章给大家介绍使用html5怎么实现移动端自适应布局,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配
2023-06-09

vue移动端自适应的方法是什么

这篇文章主要介绍“vue移动端自适应的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue移动端自适应的方法是什么”文章能帮助大家解决问题。方案1:直接引入js (自己 写的动态改变fo
2023-07-04

如何解决PC端和移动端自适应问题

这篇文章主要介绍了如何解决PC端和移动端自适应问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决
2023-06-08

关于移动端与大屏幕自适应适配方案

这篇文章主要介绍了关于移动端与大屏幕自适应适配方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

使用postcss-pxtorem怎么适配移动端

今天就跟大家聊聊有关使用postcss-pxtorem怎么适配移动端,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。执行命令 安装插件postcss-pxtoremnpm instal
2023-06-08

前端开发中移动端如何实现自适应布局

这篇文章将为大家详细讲解有关前端开发中移动端如何实现自适应布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一. 在HTML的头部加入meta标签在HTML的头部,也就是head标签中增加meta标签,告
2023-06-08

移动端法门:自适应方案和高清方案

自适应“讲的是一套UI(例如750*1334),在多端下展示近乎一样的效果;而”高清“是因为 DPR 提升而所做的各种精度适配。

vue中怎么使用rem适配移动端屏幕

这篇“vue中怎么使用rem适配移动端屏幕”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中怎么使用rem适配移动端屏幕
2023-07-04

怎么使用rem或viewport进行移动端适配

这篇文章主要介绍怎么使用rem或viewport进行移动端适配,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在开发移动端界面时,移动端适配一直是一个比较头疼的事情,常见的移动端适配有viewport适配,rem适配,
2023-06-09

SQL拼接在移动应用后端怎么实现

在移动应用后端实现SQL拼接主要是通过使用相应的数据库操作库来实现。通常来说,后端开发语言比如Node.js、Java、PHP等都有对应的数据库操作库,可以方便地执行SQL查询和拼接操作。下面以Node.js为例说明如何实现SQL拼接:首
SQL拼接在移动应用后端怎么实现
2024-04-29

编程热搜

目录