以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 ...
随机推荐
- come on,逆战
腾讯游戏 琳琅天上 逆战 ...
- CompletionService/ExecutorCompletionService/线程池/concurrent包
线程池 线程池的基本思想:线程频繁的创建.销毁会极大地占用系统资源,为了减少系统在创建销毁线程时的开销,线程池应运而生.线程池包括多个已创建的线程,当有任务要在新线程中执行时,将任务提交给线程池,线程 ...
- redis数据类型之—List
(1)list 简单介绍 list是一个有序的字符串列表,是使用双向列表实现的,可以实现最新消息排行.消息队列等功能. (2) list 常用命令
- Hibernate关联关系的映射
实体之间的关系 实体之间有三种关系 一对多:一个用户,生成多个订单,每一个订单只能属于一个用户 建表原则:在多的一方创建一个字段,作为外键,指向一的一方的主键 多对多:一个学生可以选择多门课程,一个课 ...
- CentOS两台服务器利用scp拷贝文件
yum install -y openssh-clients scp -r -P 26611 /usr/local/ssdb-20160518/ root@10.10.6.199:/usr/local ...
- python序列
序列基础 序列:python包含6种内建的序列,常用的有:列表.元组.字符串.列表可以修改,元组和字符串不能修改. 索引:从0开始递增,通过索引获取元素:可使用负数索引,从右至左.最后1个元素的位置编 ...
- secureCRT中文乱码问题
#vim /etc/sysconfig/i18n将LANG="EN_US.UTF-8"改成LANG="zh_CN.UTF-8"重新登录后生效#local查看是否 ...
- FAT32文件系统
- Windows 7 常用快捷键
常用的快捷键 Win键+D 回到桌面/当前界面(切换)Win键+M 回到桌面Win键+E 资源管理器Win键+R 运行 Win键+U 控制面板->所有控制面板项->轻松访问中心 Win键+ ...
- Git系列教程一 入门与简介
一.版本控制引入 可能我们都会有这样的经历:创建了一个文件,并对它做了多次更改,当我们想回到其中的某一次更改的时候,由于时间太长记不得那次更改的内容,于是我们在每次大的更改的时候,会创建一个文件的副本 ...