(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. 【前端】window.resize的优化

    一.概述 window.resize事件会在窗口尺寸改变的时候触发,哪怕只是改变了1像素.所以当窗口进行拖动的时候会触发很多次,很容易就卡死. 虽然部分浏览器已经进行了一点优化,但这还不够. 二.优化 ...

  2. 28. extjs中Ext.BLANK_IMAGE_URL的作用

    转自:https://blog.csdn.net/yiyuhanmeng/article/details/6960132 在使用ExtJS时,我们往往需要在使用之前加入这么一句:Ext.BLANK_I ...

  3. 【175】Easy CHM的使用

    首先下载软件,EasyCHM3.84完美破解版.rar! 安装好之后,打开程序,点击“新建”,然后浏览到存放 htm 文件的目录. 鼠标右键,选择“添加目录项”!如下图所示. 在弹出的文本框中,首先选 ...

  4. CodeForces 731F Video Cards (数论+暴力)

    题意:给定 n 个数,可以对所有的数进行缩小,问你找出和最大的数,使得这些数都能整除这些数中最小的那个数. 析:用前缀和来做,先统计前 i 个数中有有多少数,然后再进行暴力去找最大值,每次都遍历这一段 ...

  5. Ubuntu下 VirtualBox的卸载和升级 (转载)

    转载:http://blog.csdn.net/li_hai/article/details/8164744 首先,在终端查看已经安装的VirtualBox的版本: $ dpkg -l 查看到版本号, ...

  6. P2339 提交作业usaco(区间dp)

    P2339 提交作业usaco 题目背景 usaco 题目描述 贝西在哞哞大学选修了 C 门课,她要把所有作业分别交给每门课的老师,然后去车站和同学们一起回家.每个老师在各自的办公室里,办公室要等他们 ...

  7. ssm lodop打印图片不显示

    在打印预览的时候图片就是不显示 最终解决方案就是修改过滤器

  8. 微信小程序资源

    1.http://blog.csdn.net/wyx100/article/details/52667518 2.http://mp.weixin.qq.com/s?__biz=MzIyMDM2Mjg ...

  9. hdu2033

    http://acm.hdu.edu.cn/showproblem.php?pid=2033 1 #include<stdio.h> #include<string.h> #i ...

  10. Oracle11gR2设置连接数process与会话session值

    近日构建的Web应用用户数量有所上升,后台总是打印无法打开数据库连接的错误信息: 000000a3 SystemOut O 9月 ::, ERROR - msg:打开数据库出错. 经查询发现需要更改数 ...