移动的rem自适应
(function (doc, win) {
var docEl = doc.documentElement, //html
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //事件名称
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
docEl.style.fontSize = '100px';
}
else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
移动的rem自适应的更多相关文章
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- rem自适应js
Rem自适应js---flexible.min.js 网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem自适应
//REM自适应 _resize(); window.addEventListener('resize', _resize, false); function _resize() { var devi ...
- Rem自适应js---flexible.min.js
网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...
- rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem自适应原理
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应
rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...
- 通过rem自适应屏幕尺寸
通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...
随机推荐
- ACM 数论小结 2014-08-27 20:36 43人阅读 评论(0) 收藏
断断续续的学习数论已经有一段时间了,学得也很杂,现在进行一些简单的回顾和总结. 学过的东西不能忘啊... 1.本原勾股数: 概念:一个三元组(a,b,c),其中a,b,c没有公因数而且满足:a^2+b ...
- LightOJ 1112 Curious Robin Hood (单点更新+区间求和)
http://lightoj.com/volume_showproblem.php?problem=1112 题目大意: 1 i 将第i个数值输出,并将第i个值清0 2 i v ...
- all & any
def all(*args, **kwargs): """ Return True if bool(x) is True for all values x in the ...
- springAOP配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- CFileDialog 、CFile 如何进行文件操作 [转]
如何进行文件操作 [1]显示对话框,取得文件名 CString FilePathName; CFileDialog dlg(TRUE);//TRUE为OPEN对话框,FALSE为SAVE AS对话框 ...
- spring含参数 环绕通知demo
题目:有一个懂得读心术的人需要完成两件事情:截听志愿者的内心感应和显示他们在想什么 <?xml version="1.0" encoding="UTF-8" ...
- 关于Excel导入的HDR=YES; IMEX=1详解
于Excel导入的HDR=YES; IMEX=1详解2011年12月27日 星期二 11:17 参数HDR的值:HDR=Yes,这代表第一行是标题,不做为数据使用 ,如果用HDR=NO,则表示第一行不 ...
- Android中string.xml文件中设置部分字体颜色大小
1.在string.xml文件中: <string name="tips_all"><Data><![CDATA[清理进程:<font colo ...
- Codeforces Round #338 (Div. 2) B. Longtail Hedgehog dp
B. Longtail Hedgehog 题目连接: http://www.codeforces.com/contest/615/problem/B Description This Christma ...
- 【摘要】获得HTML元素的绝对位置
function findAbsolutePosition(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft ...