(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自适应的更多相关文章

  1. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  2. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  3. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  4. 【转】rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  5. rem自适应

    //REM自适应 _resize(); window.addEventListener('resize', _resize, false); function _resize() { var devi ...

  6. Rem自适应js---flexible.min.js

    网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...

  7. rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  8. rem自适应原理

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  9. 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

    rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...

  10. 通过rem自适应屏幕尺寸

    通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...

随机推荐

  1. USB -- BULK_ONLY和UFI协议

    2 BULK_ONLY和UFI协议 Bulk—Only协议是USB组织针对大容量存储设备制定的一种块存储类协议,目前已经普遍应用于各种移动存储设备. USB设备分为5大类,即显示器.通信设备.音频设备 ...

  2. cisco tftp 备份/恢复

    使用tftp服务器对cisco 3560 配置备份及恢复 Switch#copy running-config tftp:Address or name of remote host []? 192. ...

  3. VS2008 工程中部分文件不参与编译 从生成中排除【Worldsing笔记】

    Visual Studio 2008 .VS2008.VC2008工程源文件配置.编译配置   有时编写代码时,往往存在这样的需求(或是希望有这样的功能):一个工程经过不共同的配置实现不同的版本或是功 ...

  4. js关闭当前页面(窗口)的几种方式总结

    1. 不带任何提示关闭窗口的js代码 <a href="javascript:window.opener=null;window.open('','_self');window.clo ...

  5. POJ 1852 Ants (等价思考)

    题意:在一根杆上有 n 只蚂蚁,速度为1,方向不定,如果相碰,则反向运动,问你最长的时间和最短时间,所有蚂蚁都掉下杆去. 析:换个方法想,如果两只蚂蚁相碰了,会有什么现象?其实就和没有碰撞是一样的,没 ...

  6. 使用WSAIoctl获取socket扩展函数(如AcceptEx)的指针

    未获取函数指针就调用函数(如直接连接mswsock.lib并直接调用AcceptEx)的消耗是很大的,因为AcceptEx 实际上是存在于Winsock2结构体系之外的.每次应用程序常试在服务提供层上 ...

  7. OpenSSL命令---ciphers

    用途: 指令是用来展示用于SSL加密算法的工具.它能够把所有openssl支持的加密算法按照一定规律排列(一般是加密强度).这样可以用来做测试工具,决定使用什么加密算法. 用法: openssl ci ...

  8. 关于mysql存储过程的definer的问题

    由于对mysql了解不够透彻,导致对definer问题查了好久才解决问题 记录自己的一些理解! 问题描述: 在数据库写,为一个表写了一个触发器,此触发器调用一个存储过程:由公司写的一个c程序自动往该表 ...

  9. HTML第四天学习笔记

    今天老师教了下无序列表和有序列表,虽然并没有,同时做了个随堂练习: <html> <head> <title>随堂练习00</title> <me ...

  10. EXTJS中的grid显示实际行号

    添加一个新的功能 Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, { width : 40, renderer:function ...