以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 ...
随机推荐
- VR技术的系统化实现阶段
转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 从20世纪80年代至80年代中期,虚拟现实技术的基本概念开始逐渐形成和完善.这一时期出现了一些比较经典的 ...
- ImageView属性
一.结构 java.lang.Object android.view.View android.widget.ImageView 已知直接子类: ImageButton, QuickContactBa ...
- 不用写Windows服务实现定时器功能(FluentScheduler )
MacBook Pro 只有四个 USB Type-C 接口是否错了? 一项新技术的诞生总会对已存在的事物造成冲击或影响,如果大家都害怕冲击与影响,那这个世界永远像现在不变就行了,大家都好好的,待在自 ...
- JavaScript中两个感叹号的作用
先用一个简单的例子说明:var o={flag:true};var test=!!o.flag;//等效于var test=o.flag||false;alert(test);由于对null与unde ...
- python 获取日期
转载 原文:python 获取日期 作者:m4774411wang python 获取日期我们需要用到time模块,比如time.strftime方法 time.strftime('%Y-%m-% ...
- ASP.NET常见面试题及答案(130题)
1.C#中 property 与 attribute(抽像类)的区别,他们各有什么用处,这种机制的好处在哪里?答:property和attribute汉语都称之为属性.不过property是指类向外提 ...
- HDU1003 简单DP
Max Sum Problem Description Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the ...
- POJ 2431Expedition
Description A group of cows grabbed a truck and ventured on an expedition deep into the jungle. Bein ...
- centos yum安装saltstack
1.导入安装源 centos5 rpm -Uvh http://ftp.linux.ncsu.edu/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm cen ...
- Linux CentOS下安装Oracle
1 .在安装oracle之前首先安装以下组件包,直接输入下列语句安装. yum install binutils* -y yum install compat-lib* -y yum install ...