(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. luogu 1080 国王游戏

    题目大意: 有一些数对,每个数对的得分为它之前所有数对的左侧数之乘积除以它的右侧数 求重新排列后数列中所有数对中最大得分尽可能小(第一个数对不参与排序,仍然为第一个) 思路: 非常简单,可以根据它对后 ...

  2. MySQL5.7修改字符集

    本人安装的mysql版本是5.7.20,安装好mysql后就要对字符集进行修改了,于是照着网上的大部分教程说的去安装目录找一个my-default.ini文件,然后重命名为my.ini,再对其进修改字 ...

  3. MySQL:MySQL安装

    ylbtech-MySQL:MySQL安装 mysql5.5.27_win64_zol.msi 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14 ...

  4. Python---NumPy模块---矩阵操作

    1.NumPy访问[数组&矩阵] 2.矩阵的运算 3.NumPy通用函数 4.NumPy矩阵的合并和分割 print "**********Numpy访问(数组&矩阵)*** ...

  5. HTML5移动Web开发

    1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...

  6. bzoj 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复【最大生成树】

    裸的最大生成树,注意判不连通情况 #include<iostream> #include<cstdio> #include<algorithm> using nam ...

  7. 洛谷P4397 [JLOI2014]聪明的燕姿

    传送门 dfs的时候莫名其妙深度太大过不了……然后死活找不出哪里错…… 首先,约数和这东西是个积性函数,或者直接点的话就是如果$$n=p_1^{a_1}p_2^{a_2}p_3^{a_3}…p_m^{ ...

  8. mysql百万数据分页查询速度

    百万数据测试 ,; 受影响的行: 时间: .080ms ,; 受影响的行: 时间: .291ms ,; 受影响的行: 时间: .557ms ,; 受影响的行: 时间: .821ms ,; 受影响的行: ...

  9. Manacher HDOJ 3068 最长回文

    题目传送门 关于求解最长回文子串,有dp做法,也有同样n^2的但只用O(1)的空间,还有KMP,后缀数组?? int main(void) { ) == ) { ); memset (dp, fals ...

  10. The Chosen One

    https://www.hackerrank.com/contests/101hack45/challenges/the-chosen-one 找出一个数字,使得,数组中只有一个数字不是这个数的约数, ...