(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. Massive Data Mining学习记录

    第一周: 学习PageRank, 知识点:每个节点的权值由其他节点的投票决定,所有节点的权值和为1 当节点很多时候必须转换成矩阵运算来计算节点的最终值,由马尔可夫链可以证明,这个值可以迭代得到 问题: ...

  2. Window 无法启动此程序,因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll。尝试重新安装该程序以解决此问题。

    现象: 解决办法: 方法一:缺什么补什么 http://www.greenxf.com/soft/125654.html 把api-ms-win-crt-runtime-l1-1-0.dll下载到电脑 ...

  3. ODB——基于c++的ORM映射框架尝试(使用)

    摘要: 2.使用 首先,需要定义一个对象,用来和数据库字段对应: [cce lang=”cpp”] #ifndef VOLUME_H #define VOLUME_H #include #includ ...

  4. 11.7NOIP模拟题

    /* 有循环节 */ #include<cstdio> #include<cstring> #include<iostream> #include<algor ...

  5. mysql 根据总分排名

    mysql 根据总分排名 SELECT t.*, @rank := @rank + AS rank FROM ( SELECT @rank := ) r, ( SELECT tas.id, tas.t ...

  6. linux vi 块操作、多窗口

    vim 块选择v:字符选择或者行选择[ctrl]+v: 块选择y:将反白的地方复制d:将反白的地方删除 多窗口:sp {filename} 打开一个新的窗口[ctrl]+w+j或者[ctrl]+w+向 ...

  7. 计算几何值平面扫面poj2932 Coneology

    Coneology Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4097   Accepted: 859 Descript ...

  8. ACM_同余+暴力找规律

    小光的忧伤 Time Limit: 2000/1000ms (Java/Others) Problem Description: 锴神:我尊重作者原意,你们出什么我就加什么.于是小光打了道水题(也就是 ...

  9. [ ZJOI 2010 ] 网络扩容

    \(\\\) Description 给定一张有向图,每条边都有一个容量 \(C\) 和一个扩容费用 \(W\). 这里扩容费用是指将容量扩大 \(1\) 所需的费用.求: 在不扩容的情况下, \(1 ...

  10. SAS进阶《深入分析SAS》之数据汇总和展现

    SAS进阶<深入分析SAS>之数据汇总和展现 1. 通过Print过程制作报表 proc print <data=数据集>; run; 选项: obs=修改观测序号列标签 no ...