移动端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 ...
随机推荐
- JS之this那些事
一直以来,对this的讨论都是热门话题.有人说掌握了this就掌握了JavaScript的80%,说法有点夸张,但可见this的重要性.至今记录了很多关于this的零碎笔记,今天就来个小结. 本人看过 ...
- vsCode代码缩略图
vsCode配置代码缩略图: 文件--首选项--设置 搜索 minimap true 打开 false 关闭
- idea 正则全局替换文件文本
上一遍写到了log4j2分层输出日志的内容,但因为项目原先采用的log4j,现使用log4j2,需将原有log4j的代码进行替换,以前的代码类似如下: private static final Log ...
- 【基础笔记】tomcat安装后运行出现出现问题(the JRE_HOME environment variable is not defined correctly This environment variabl)
之前装好tomcat后正常运行 后来重装系统后,又一次配置环境时却报错. 在网上查找了两篇文章. https://blog.csdn.net/haleyliu123/article/details/ ...
- centOs升级
因为军佬放弃制作Centos7的网络重装包,又Centos7的安装引导和6有较大区别所以,选择曲线救国(技术不行,只能这样乱搞)前文:Centos6.9一键重装包https://ppx.ink/net ...
- 003Linux常用命令
文件操作 01 命令 : list----列出目录信息 命令格式: ls [-选项] [目录] 选项 : -a --all 不忽略以"."开头的隐藏文件 : -d --direc ...
- python str、int、dict
一.str print(dir(int))#['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', ...
- stopPropagation()阻止事件向父容器传递
topPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数 ...
- 一个sql server 实施工程师的反思
自14年开始从事数据库实施,至今(2018-02-16)晃眼间已经四个年头过去了,工作上的能力要求多数能自己解决,可这不应该成为我学习路上的终点.加之总觉得自己对sql 的理解有些浮于表面,所以借着春 ...
- ASP.NET中引用dll“找不到指定模块"的完美解决办法 z
DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL导出的函数的必要调用信息.DllImport属性应用于方法,要求最少要 ...