以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 ...
随机推荐
- tp框架之空方法与空控制器
对于空方法的两种方法: 1.建立一个empty模板(不建议,除非打算指定静态页面) 2.在控制器里面加一个empty方法 public function _empty() { echo "控 ...
- shell腳本
1.awk过滤重复行 awk '!a[$0]++{print $0}' 过滤重复行 awk '!a[$1]++{print $1}' 过滤第一列重复行 并只打印第一列 awk '!($1 in a){ ...
- python处理地理数据-geopandas和pyshp
这边博客并不是有关geopandas的教程和pyshp的教程! 使用python来处理地理数据有很多相关的包,最近研究需要处理一些地理数据,然而arcgis的arcpy总是不能令人满意.所以这里说说p ...
- android 得到缩略图
转载至 http://blog.csdn.net/dxh040431104/article/details/6667448 怎样获取图片的大小?思路很简单:首先我们把这个图片转成Bitmap,然后再利 ...
- bootstrap 使用需注意的一些点
table 中td的宽度可以td 的style设置,然后在设置内部比如img对象款高实现对于 table其中某列的设置.
- 08 Servlet
Servlet技术 * Servlet开发动态的Web资源的技术. * Servlet技术 * 在javax. ...
- [ACM训练] 数据结构----树、二叉树----c++ && python
树结构,尤其是二叉树结构是算法中常遇见的,这里根据学习过程做一个总结. 二叉树所涉及到的知识点有:满二叉树与完全二叉树.节点数目的关系.节点数与二叉树高度的关系.层次遍历.深度优先遍历.广度优先遍历等 ...
- ZeroMQ接口函数之 :zmq_ctx_shutdown - 停止一个ZMQ context
ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_ctx_shutdown zmq_ctx_shutdown(3) ØMQ Manual - ØMQ/4.1.0 N ...
- table常用功能总结
1,设置表格边框为单线框 table, th, td { border: 1px solid blue; }加上:table { border-collapse:collapse; } 由于 tabl ...
- bzoj刷水
因为最近的生活太颓废总是不做题而被老师D了一番, 所以今天晚上到bzoj上去刷了几道水题..... bzoj 4320: ShangHai2006 Homework 题目大意 维护一个支持两个操作 ...