(function(doc, win) {
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//orientationchange屏幕是否旋转
recalc = function() {
var whdef = 120 / 1920; // 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //监听事件窗口变化的事件
doc.addEventListener('DOMContentLoaded', recalc, false); //初始化完成
})(document, window)

rem js 自适应布局的更多相关文章

  1. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  2. 移动端web app要使用rem实现自适应布局:font-size的响应式

    关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法​,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...

  3. Rem实现自适应布局

    rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端(rem:就是css单位) 1.项目入口html文件<meta name="viewport" content ...

  4. rem.js移动布局实例教程

    最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...

  5. flexible.js + makegrid.js 自适应布局

    一,flexible.js 的使用方式: (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3. ...

  6. 针对老式浏览器(主要是IE6、7、8)的css3-mediaqueries.js自适应布局

    <meta name="viewport" content="width=device-width, initial-scale=1" /> vie ...

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

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

  8. 关于使用rem单位,calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  9. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

随机推荐

  1. 在canvas上面绘制图片--drawImage实例

    在canvas上面绘制图片--drawImage实例 关键点: 1.图片居中 2.其它 <!DOCTYPE html> <html lang="zh-cn"> ...

  2. oracle游标的定义使用

    oracle游标的定义使用 2008-02-23 15:12:57|  分类: oracle|字号 订阅 游标中定义的参数只要定义类型,不用定义长度,精度等: 游标使用一: declarecursor ...

  3. matlab进入指定目录

    cd C:\Users\hui\Desktop\minepy\1\minepy-1.2.0\minepy-1.2.0\matlab

  4. AtCoder Regular Contest 099 C~E

    C - Minimization 枚举就可以了 因为最后一定会变成1,所以第一次操作的区间就包含1会比较优,然后枚举1在第一次操作区间里排第几个取min即可 #include<iostream& ...

  5. akka监控框架设计

    本博客介绍一种AOP.无侵入的akka监控方案,方便大家在生产使用akka的过程中对akka进行监控. 对于自身javaer来说,AOP三个字母基本就解释清楚了akka监控框架的原理.哈哈哈,不过我这 ...

  6. [转]C语言常见错误总结1

    指针与数组的对比c程序中,指针和数组在不少地方可以相互替换着用,让人产生一种错觉,以为两者是等价的 数组要么在静态存储区被创建(如全局数组),要么在栈上被创建.数组名对应着(而不是指向)一块内存,其地 ...

  7. MySQL故障处理一例_Another MySQL daemon already running with the same unix socket

    MySQL故障处理一例:"Another MySQL daemon already running with the same unix socket". [root@test- ...

  8. 转 phpmyadmin操作技巧:如何在phpmyadmin里面复制mysql数据库?

    对于每一个站长而言,都会遇到要进行网站测试的时候.这个时候,往往需要备份数据库.如果按照一般的操作方式,都是先把数据库导出并备份到本地,然后再服务器上测试.如果一切正常还好,一旦出了问题,就又得把数据 ...

  9. apache-storm-0.9.6.tar.gz的集群搭建(3节点)(图文详解)

    不多说,直接上干货! Storm的版本选取 我这里,是选用apache-storm-0.9.6.tar.gz Storm的本地模式安装 本地模式在一个进程里面模拟一个storm集群的所有功能, 这对开 ...

  10. C#,VB.NET将PPT文档转换为HTML

    PPT文档主要用于展示,有时候我们需要将PPT文档转换为HTML格式方便查看.本文将介绍如何使用C#和VB.NET将PPT文档转换为HTML格式.该方案使用了.NET PowerPoint 组件Spi ...