define(function (require, exports, module) {
exports.mobileUtilMethod = function () {
(function (e, t) {
function n() {
for (var e = navigator.userAgent,
t = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"], n = !0, i = 0; t.length > i; i++) if (e.indexOf(t[i]) > 0) {
n = !1;
break
}
return n
}
function i() {
var t = a.getBoundingClientRect().width;
n() && 2047 > t && (t = 640);
var i = t * 100 / w;
a.style.fontSize = i + "px",
d.rem = e.rem = i
}
var r, o = e.document,
a = o.documentElement,
s = o.querySelector('meta[name="viewport"]'),
c = o.querySelector('meta[name="flexible"]'),
l = 0,
u = 0,
d = t.flexible || (t.flexible = {});
var w = o.querySelector('meta[name="W_design"]') ? o.querySelector('meta[name="W_design"]').getAttribute('content') : 640;
if (s) {
// console.warn("将根据已有的meta标签来设置缩放比例");
var p = s.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
p && (u = parseFloat(p[1]), l = parseInt(1 / u))
} else if (c) {
var f = c.getAttribute("content");
if (f) {
var h = f.match(/initial\-dpr=([\d\.]+)/),
m = f.match(/maximum\-dpr=([\d\.]+)/);
h && (l = parseFloat(h[1]), u = parseFloat((1 / l).toFixed(2))),
m && (l = parseFloat(m[1]), u = parseFloat((1 / l).toFixed(2)))
}
}
if (!l && !u) {
e.navigator.appVersion.match(/android/gi);
var g = e.navigator.appVersion.match(/iphone/gi);
e.navigator.appVersion.match(/ipad/gi);
var v = e.devicePixelRatio;
l = g ? v >= 3 && (!l || l >= 3) ? 3 : v >= 2 && (!l || l >= 2) ? 2 : 1 : 1,
u = 1 / l
}
if (a.setAttribute("data-dpr", l), !s) if (s = o.createElement("meta"), s.setAttribute("name", "viewport"), s.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), a.firstElementChild) a.firstElementChild.appendChild(s);
else {
var y = o.createElement("div");
y.appendChild(s),
o.write(y.innerHTML)
}
e.addEventListener("resize",
function () {
clearTimeout(r),
r = setTimeout(i, 300)
}, !1),
e.addEventListener("pageshow",
function (e) {
e.persisted && (clearTimeout(r), r = setTimeout(i, 300))
}, !1),
"complete" === o.readyState ? o.body.style.fontSize = 12 * l + "px" : o.addEventListener("DOMContentLoaded",
function () {
o.body.style.fontSize = 12 * l + "px"
}, !1),
i(),
d.dpr = e.dpr = l,
d.refreshRem = i,
d.rem2px = function (e) {
var t = parseFloat(e) * this.rem;
return "string" == typeof e && e.match(/rem$/) && (t += "px"),
t
},
d.px2rem = function (e) {
var t = parseFloat(e) / this.rem;
return "string" == typeof e && e.match(/px$/) && (t += "rem"),
t
}
})(window, window.lib || (window.lib = {}));
}
})

移动端flex自适应方案。(px to rem)的更多相关文章

  1. 原生js移动端字体自适应方案

    自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...

  2. Html5移动端页面自适应布局详解(rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  3. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  4. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  5. 从原理到方案,一步步讲解web移动端实现自适应等比缩放

    前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增 ...

  6. 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem

       在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...

  7. 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...

  8. finereport普通报表的移动端自适应方案

    移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可 ...

  9. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

随机推荐

  1. Django api

    http://www.cnblogs.com/wulaoer/p/5276050.html

  2. [转]Setting the NLog database connection string in the ASP.NET Core appsettings.json

    本文转自:https://damienbod.com/2016/09/22/setting-the-nlog-database-connection-string-in-the-asp-net-cor ...

  3. Windows Composition API 指南 - 认识 Composition API

    微软在 Windows 10中 面向通用 Windows 应用 (Universal Windows Apps, UWA) 新引入了一套用于用户界面合成的 API:Composition API.Co ...

  4. 关于controller和apicontroller的跨域实现过滤器的不同

    1.controller的跨域访问 filter的实现请继承System.Web.Mvc.ActionFilterAttribute 2.apicontroller的跨域访问 filter的实现请继承 ...

  5. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported或其他Content type不支持处理

    很久没从头到尾搭框架,今天搭的过程中,springmvc controller方法入参用@RequestBody自动绑定参数时一直提示各种 not supported 排查问题有两个解决路径: 1)使 ...

  6. ie 9 渐变背景色兼容问题

    /*窗口背景*/  .window {    background-color: #fff;    background: -webkit-linear-gradient(top,#EFF5FF 0, ...

  7. Windows7建立无线热点

    很实用的技巧,加以记录. 最初我是想使用connectify的,不过安装这个软件之后,发现有线账号登不上了,所以就选择使用Windows7自带的工具了. 首先以管理员身份运行cmd. 进入之后cd到c ...

  8. jQuery Mobile 移动 web 应用程序框架

    在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...

  9. Centos7安装JDK1.8 Linux64bit

    流程一览: 1.下载JDK1.8(jdk-8u11-linux-x64.tar.gz) 2. 解压缩安装 3.配置JAVA_HOME环境变量 4.切换JDK1.8为当前使用的JDK 5.重启,查看安装 ...

  10. March 14 2017 Week 11 Tuesday

    Thinking will not overcome fear but action will. 空想终日惶恐,行动方可无惧. As the deadline comes closer and clo ...