移动端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 ...
随机推荐
- Unity3D第二课之通过键盘、鼠标移动物体
public class xuanzhuan : MonoBehaviour { //平移速度变量 public float MoveSpeed;// Use this for initializat ...
- rem,em,px
http://pxtoem.com/ px,em,rem单位转换工具 px(Pixel)根据显示屏分辨率,固定大小 em,根据父元素大小进行改变 rem,根据html进行相对改变 em 1. bod ...
- CentOS 7 学习笔记
Centos7 命令行 快捷键: 上方向键, 查看上一条命令 Ctrl+C 强制终止程序运行 新版 nmtui 配置网络 旧版 setup(已经没了) 网络接口 ip a = ip a ...
- git如何进行远程分支切换
git如何进行远程分支切换 git上查看远程分支命令: git branch -a 例如: 然后我想切换到daily/1.0.0远程分支:前提是必须要创建一个本地分支,并让它和远程分支进行关联,gi ...
- Java NIO(一) Java NIO 概述
Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Buffer 和 Sel ...
- 64位MATLAB和C混合编程以及联合调试
[环境说明] 电脑操作系统:win 7 旗舰版,64位 MATLAB版本:R2013b VS版本:Microsoft Visual Studio 2010 [操作说明] 1.在原来工程的基础上添加下列 ...
- JSP + JavaBean + Servlet实现MVC设计模式
1.流程图: 2.代码清单 数据库脚本: DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `userid` ) NOT NULL, `name` ...
- Selenium2学习(七)-- 定位一组元素find_elements
前言 前面的几篇都是讲如何定位一个元素,有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象. webdriver 提供了定位一组元素的方法,跟前面八种定位方式 ...
- matlab解方程
[x1,y1,x2,y2]=solve('x1^2 + y1^2=1','x2^2-8*x2 +y2^2 +15=0','x1*x2 + y1 * y2=1','x1 + x2 =a','x1','y ...
- Scrum _GoodJob
作为长大的大三老腊肉,我们已经在长大生活了两年多,对于什么是长大人最想完善的校园需求.最想拥有的校园服务媒介也有了更加深切的体会. 于是,GoodJob小团队blingbling闪现啦!! GoodJ ...