移动的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,具有继承 ...
随机推荐
- Pylint
[Pylint] pylint的调用命令: pylint [options] module_or_package 使用 Pylint 对一个模块 module.py 进行代码检查: 1. 进入这个模块 ...
- HDU 4619 Warm up 2(2013多校2 1009 二分匹配)
Warm up 2 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total S ...
- Objc基础学习记录3
在学习Objective-c中, 数组 1.NSArray, 这是一个不可变的数组,不能修改和删除其中的对象,可以存储任意objective的对象指针. 不能存储int,char类型的,,需要转换为需 ...
- DbHelperSQL和Dapper数据访问的性能对比
http://www.cnblogs.com/finesite/archive/2012/08/23/2652491.html
- 导入导出Excel
最近需要频繁的使用导入导出,各么,又不想使用ms的PIA,在4.0以下,存在版本兼容的问题. 于是网上查找了很久,找到两款开源的excel组件. 1.CSharpJExcel,这是JExcel的.ne ...
- 有关获取session属性时报nullPointException(空指针异常)的解决方案
一般我们在从session中获取数据时,需要先进行赋值,也就是必须先进行session.setAttribute(String,Object)方法进行赋值,然后我们才能从session中获取内容,但是 ...
- 更改SQL数据库的繁体数据为简体
上一篇说到,公司需要把所有的系统逐步更改为简体,一些系统可以保持原先的繁体数据,而有一些系统应使用部门的要求,必须要更改为简体,由于程序很大,报表也多,修改程序转换显示的可能性不大,故所以打算把数据库 ...
- ASP.NET中DesignMode属性
参考:http://blog.sina.com.cn/s/blog_4c9da9b50100r4u7.html http://book.51cto.com/art/200902/108836.htm ...
- wpa_supplicant 中的wpa_supplicant.conf
主要记录下wep加密相关的配置文件的写法. network={ ssid="static-wep-test2" key_mgmt=NONE wep_key0= //密钥索引为2, ...
- wp———图片切换效果
此篇文章主要是记录一下使用XamlReader加载动画时遇到的一些问题. 首先呢,把源码附上 <phone:PhoneApplicationPage x:Class="PicChang ...