以rem为单位根据移动设备的分辨率动态设置font-size
无需指定font-size的大小
<script> // //- 设置根元素fontSize~
// (function (doc, win) {
// var _root = doc.documentElement,
// resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
// resizeCallback = function () {
// var clientWidth = _root.clientWidth,
// fontSize = 0;
// if (!clientWidth) return;
// if(clientWidth < 640) {
// fontSize = clientWidth / 10;
// } else {
// fontSize = 640 / 10;
// }
// _root.style.fontSize = fontSize + 'px';
// };
// if (!doc.addEventListener) return;
// win.addEventListener(resizeEvent, resizeCallback, false);
// doc.addEventListener('DOMContentLoaded', resizeCallback, false);
// })(document, window);
!
function(a, b) {
function c() {
var b = f.getBoundingClientRect().width;
b / i > 1080 && (b = 1080 * i);
var c = b / 10;
f.style.fontSize = c + "px", k.rem = a.rem = c
}
var d, e = a.document,
f = e.documentElement,
g = e.querySelector('meta[name="viewport"]'),
h = e.querySelector('meta[name="flexible"]'),
i = 0,
j = 0,
k = b.flexible || (b.flexible = {});
if (g) {
console.warn("将根据已有的meta标签来设置缩放比例");
var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
l && (j = parseFloat(l[1]), i = parseInt(1 / j))
} else if (h) {
var m = h.getAttribute("content");
if (m) {
var n = m.match(/initial\-dpr=([\d\.]+)/),
o = m.match(/maximum\-dpr=([\d\.]+)/);
n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
}
}
if (!i && !j) {
var p = a.navigator.userAgent,
q = ( !! p.match(/android/gi), !! p.match(/iphone/gi)),
r = q && !! p.match(/OS 9_3/),
s = a.devicePixelRatio;
i = q && !r ? s >= 3 && (!i || i >= 3) ? 3 : s >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
}
if (f.setAttribute("data-dpr", i), !g) if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
else {
var t = e.createElement("div");
t.appendChild(g), e.write(t.innerHTML)
}
a.addEventListener("resize", function() {
clearTimeout(d), d = setTimeout(c, 300)
}, !1), a.addEventListener("pageshow", function(a) {
a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
}, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function() {
e.body.style.fontSize = 12 * i + "px"
}, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function(a) {
var b = parseFloat(a) * this.rem;
return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
}, k.px2rem = function(a) {
var b = parseFloat(a) / this.rem;
return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
}
}(window, window.lib || (window.lib = {}));
</script>
以rem为单位根据移动设备的分辨率动态设置font-size的更多相关文章
- 750的设计图以rem为单位的移动设备响应的设置大小
750的设计图,设置font-size: 125%; 1rem =20px; 大部分浏览器默认的字体大小为16px,谷歌默认字体大小为12px; 其他设备的fon-size的比列: 320/720 ...
- 根据设备宽高动态设置View的大小
得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...
- 根据设备width(375)动态设置font-size
根据html的font-size使用rem来优化移动端页面 (function () { var w = window, d = document.documentElement, t; var re ...
- Wince 6.0获取设备的分辨率 自动设置窗体位置
调用微软提供给wince的API “coredll.dll” [DllImport("coredll.dll")] public static extern int GetSys ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...
- 如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...
- 关于 rem 作为单位设置大小
rem是相对长度单位.相对于根元素(即html元素)font-size计算值的倍数htm{font-size: 62.5%;}根元素(html)先设置一个font-size,一般情况下为了容易计算re ...
- 用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件
20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI ...
随机推荐
- C#回顾 - 7.如何使用反射实现工厂模式?
工厂模式是一种比较常用的设计模式,其基本思想在于使用不同的工厂类型来打造不同产品的部件.例如,我们在打造一间屋子时,可能需要窗户.屋顶.门.房梁.柱子等零部件.有的屋子需要很多根柱子,而有的屋子又不需 ...
- vi使用
vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后一行首 vi + ...
- zoj 3820(2014牡丹江现场赛B题)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5374 思路:题目的意思是求树上的两点,使得树上其余的点到其中一个点的 ...
- CodeForces 544A
You are given a string q. A sequence of k strings s1, s2, ..., sk is called beautiful, if the concat ...
- git stash和git stash pop
git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码, 又不想加新commit, 或者另外一种情况,为了fix 一个紧急的bug, 先stash, 使返回到自己上一个comm ...
- Windows Server 2008 R2 DNS 服务器迁移
- SOAPUI使用教程-验证SOAP服务
当soapUI创建一个功能性TestCase 一个很常见的场景是你想一些SOAP / WSDL服务验证响应检查返回正确的结果. 一旦你导入了您想要测试的WSDL服务这样做很容易: 添加一个新的SOAP ...
- 【BFS】POJ 2251
POJ 2251 Dungeon Master 题意:有一个地图,三维,走的方向是上下,左右,前后.问你最小步数从起始点走到出口. 思路:三维的BFS,就是多加一组状态,需要细心(不细心如我就找了半个 ...
- style
设计的默认单位为px; 为了简化设计,都是以750px为基本单位设计的,如果屏幕大小不同,它会根据屏幕大小自动缩放. 它的样式选择和CSS非常类似,但是和CSS选择器不同的是,它只支持单级选择,不支持 ...
- ZeroMQ接口函数之 :zmq_curve – 安全的认证方式和保密方式
ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_curve zmq_curve(7) ØMQ Manual - ØMQ/4.1.0 Name zmq_curve ...