无需指定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的更多相关文章

  1. 750的设计图以rem为单位的移动设备响应的设置大小

    750的设计图,设置font-size: 125%;  1rem =20px;  大部分浏览器默认的字体大小为16px,谷歌默认字体大小为12px; 其他设备的fon-size的比列: 320/720 ...

  2. 根据设备宽高动态设置View的大小

    得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...

  3. 根据设备width(375)动态设置font-size

    根据html的font-size使用rem来优化移动端页面 (function () { var w = window, d = document.documentElement, t; var re ...

  4. Wince 6.0获取设备的分辨率 自动设置窗体位置

    调用微软提供给wince的API  “coredll.dll” [DllImport("coredll.dll")] public static extern int GetSys ...

  5. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  6. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  7. 如何利用rem在移动端不同设备上让字体自适应大小

    本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...

  8. 关于 rem 作为单位设置大小

    rem是相对长度单位.相对于根元素(即html元素)font-size计算值的倍数htm{font-size: 62.5%;}根元素(html)先设置一个font-size,一般情况下为了容易计算re ...

  9. 用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件

    20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI ...

随机推荐

  1. LeetCode 372

    题目: Your task is to calculate a^b mod 1337 where a is a positive integer and b is an extremely large ...

  2. android系统中自带的一些ThemeStyle

    1 android:theme="@android:style/Theme.Holo.Light.NoActionBar.Fullscreen" 布局页面最上面 不会显示  and ...

  3. margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;

    总的来说:这是CSS3.0的对于文章段P容器的定义方法语句!display:block这个样式,只定义了P容器为一个块;后面四句是CSS3中的样式定义方法:-webkit-margin-before: ...

  4. 网络科学 - 社区发现 Community structure and detection及其几个实现工具

    首先什么是社区(Community structure)呢?其实并不是指一个网络相互连接的部分,而是一个网络中链接“紧密的部分”,至于怎么定义紧密就有很多方法了. 社区发现算法可以参考下面的博客:博客 ...

  5. HTML5中的对象的拖拽

    拖拽: draggable="true"页面上就能实现拖拽事件: ondragstart 拖拽开始事件 ondrag 拖拽中 ondragend 拖拽结束事件 投放区事件: ond ...

  6. SubSonic指南中文版

    翻译:王鹏程张原 王伟策划:毛凌志2009年1月北京工业大学软件学院PS:有问题反馈至http://lexus.cnblogs.comGetting Started with SubSonicBy S ...

  7. python教程

    教程1: http://www.runoob.com/python/python-tutorial.html 教程2: http://www.liaoxuefeng.com/wiki/00137473 ...

  8. centos使用yum安装软件的时候出现了undefined symbol: CRYPTO_set_locking_callback

    1.问题 在CentOS下使用yum安装软件,结果出现了下面的错误提示: # yum installThere was a problem importing one of the Python mo ...

  9. 摘要: Linux下which、whereis、locate、find命令的区别

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which    ...

  10. <一>获取数据库连接

    一.JDBC_通过Driver接口获取数据库连接 1. Driver是一个接口:数据库厂商必须提供实现的接口,可以从其中 获取数据库连接. 2.JDBC URL由三部分组成,各部分用冒号隔开,格式:j ...