移动端flex自适应方案。(px to rem)
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)的更多相关文章
- 原生js移动端字体自适应方案
自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...
- Html5移动端页面自适应布局详解(rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
- 最佳移动端h5自适应rem适配方案
一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- 从原理到方案,一步步讲解web移动端实现自适应等比缩放
前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增 ...
- 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿
设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...
- finereport普通报表的移动端自适应方案
移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可 ...
- Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
随机推荐
- 深入理解JavaScript系列(7):S.O.L.I.D五大原则之开闭原则OCP
前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第2篇,开闭原则OCP(The Open/Closed Principle ). 开闭原则的描述是: Software ...
- mc:Ignorable="d"什么意思?
有两个命名空间我们要注意一下的:xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc=" ...
- main方法击破
什么是main方法? 是类中的一段代码,可以让程序独立运行. public class HelloWord{ public static void main(String[] args) { for ...
- windows下使用xerces -c解析XML
windows下使用Xerces-C++解析XML 前景提要 最近工作中遇到收到的数据为xml格式的情况,考虑到xml解析应该是个很常用的功能,应该有开源的lib库可以使用,于是就在网上找了找,果然发 ...
- IT小小鸟读书笔记2
Part4: 一. 大学的时光真的很容易荒废,自己的实力到头来和自己的成绩单一样空虚,其实自己也是深有同感的. 二. 这个观点我十分的认同:在某个方面比别人多5%的深度,可能拿到的报酬就是 ...
- bit_count
bit_count函数的含义 用来计算二进制数中包含1的个数. select BIT_COUNT(10); 因为10转成二进制是1010,所以该结果就是2. bit_or函数的含义 就是对两个二进制数 ...
- 手写vector
看过JDK源码,现在自己想实现一个vector. 最开始的时候,我大概构想了一下怎么设计,一种是设置一个指针数组来存放对象,这样修改的时候可以不用大量的元素复制,但后来仔细想了想,它需要设置一个额外的 ...
- ZT acct 中文man页面(1)
acct 中文man页面(1) 2011-08-18 13:57 佚名 博客转载 我要评论(0) 字号:T | T 如果在内核编译时开启了进程记账选项(CONFIG_BSD_PROCESS_ACCT) ...
- python入门24 json模块
现在很多接口传参和响应都是json串. json.dumps() python对象转化为json字符串 json.loads() json字符串转化为python对象.[]转变成list,{}转变 ...
- Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...