移动端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 ...
随机推荐
- Object 公共方法详解
在C#中,所有类型最终都从System.Object派生,所以每个类型的每个对象都保证了一组最基本的方法.具体地说,System.Object提供了一组公共实例方法. 一.Equals 如果两个对象具 ...
- 获取全球dns统计信息
# -*- coding:UTF-8 -*- import requests, time import json from bs4 import BeautifulSoup as bp t3 = ti ...
- 删除table表格行
function getRowObj(obj) { while(obj.tagName.toLowerCase()!="tr") // toLowerCase转化小写 { ...
- 关于“System.Data.ProviderIncompatibleException”类型的异常
作为刚学习MVC的菜鸟,因为平常的不努力学习.看书,所以只能参考官方的教程学习操作新手入门 一步一步认真的做,前天晚上出现了一个关于数据库连接字符串错误的问题,自己查了很多资料, 问了许多大神,他们的 ...
- EF 取出demical数据,但需要去点小数,排序
try { BasePaperWeightDAL.Get(o => o.IsDeleted == false && o.IsEnabled == true).OrderByDes ...
- JavaWeb技术
1.简介 Java Web是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet,不过使用得很少,Java在 ...
- ThreadPoolExecutor(上篇)
Java有两个线程池类:ThreadPoolExecutor和ScheduledThreadPoolExecutor,继承AbstractExecutorService类,AbstractExecut ...
- 前端自动分环境打包(vue和ant design)
现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了. 期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确. 既然有 ...
- mysql四:数据操作
一.介绍 MySQL数据操作: DML ======================================================== 在MySQL管理软件中,可以通过SQL语句中的 ...
- 引爆你的Javascript代码进化 (转)
转自 海玉的博客 方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语言的理解,对JS编程能力提高必是极好的.说人话:丫代码写的太乱,看的窝火! 最近闲暇无事,准备 ...