(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. HD1013Digital Roots

    Problem Description The digital root of a positive integer is found by summing the digits of the int ...

  2. rdlc 分页操作

    工具箱中拖一个列表过来,设置 列表-->行组-->组属性常规-->组表达式=Int((RowNumber(Nothing)-1)/10)分页符-->勾选在组的结尾

  3. iOS 8自动调整UITableView和UICollectionView布局

    本文转载自:http://tech.techweb.com.cn/thread-635784-1-1.html 本文讲述了UITableView.UICollectionView实现 self-siz ...

  4. POJ 3298 Antimonotonicity (思维)

    题目链接:http://poj.org/problem?id=3298 找一个最长不要求连续的子序列,如a1 > a3 < a6 > a7 ... 举个例子模拟一下差不多明白了,a[ ...

  5. poj1061 青蛙的约会 扩展欧几里德的应用

    这个题解得改一下,开始接触数论,这道题目一开始是看了别人的思路做的,后来我又继续以这种方法去做题,发现很困难,学长告诉我先看书,把各种词的定义看懂了,再好好学习,我做了几道朴素的欧几里德,尽管是小学生 ...

  6. JPBM4.4基础及数据库说明

    JPBM4.4基础及数据库说明 对jBPM4.4数据库的几张表简单介绍: A.资源库和运行时表结构 JBPM4_DEPLOYMENT   流程定义表                           ...

  7. jquery获取kindEditor值

    KE.show({            id: 'txtMessage',            imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...

  8. android 动画属性(一)之Animation

    Animation 在android 程序当中很多时候要用到动画效果,而动画效果主要是Animation来实现的,API给出的解释: 其中包含4种动画效果 AlphaAnimation 渐变透明度 R ...

  9. 认识position=fixed

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-01-13) position=fixed是相对于浏览器边框的位置.

  10. thinkphp 3+ 观后详解 (5)

    static public function dispatch() { $varPath = C('VAR_PATHINFO'); $varAddon = C('VAR_ADDON'); $varMo ...