rem js 自适应布局
(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 自适应布局的更多相关文章
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- Rem实现自适应布局
rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端(rem:就是css单位) 1.项目入口html文件<meta name="viewport" content ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- flexible.js + makegrid.js 自适应布局
一,flexible.js 的使用方式: (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3. ...
- 针对老式浏览器(主要是IE6、7、8)的css3-mediaqueries.js自适应布局
<meta name="viewport" content="width=device-width, initial-scale=1" /> vie ...
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- 关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
随机推荐
- Android实战技巧之八:Ubuntu下切换JDK版本【转】
本文转载自:http://blog.csdn.net/lincyang/article/details/42024565 Android L之后推荐使用JDK7编译程序,这是自然发展规律,就像是4年前 ...
- 控件CListCtr详解
1.CListCtrl控件 CListCtrl控件在数据库编程中是用得比较多的控件之一,也是Window控件中较难掌握的一个控件.他可以有四显示方式,Report.List.Icon.SmallIco ...
- Java 反射 —— 运行时的类型信息
1. 反射机制的由来 RTTI 机制可以告知某个对象的确切类型,但有一个前提,该类型在编译时必须已知(编译器在编译时打开和检查 .class 文件以获取类型信息).似乎是个很宽松的限制,但假如你获取了 ...
- linux 基础 —— 网络管理
Linux 最强大的功能是什么?网络功能. 修改 dns 服务器(解析域名到 ip 地址): $ sudo vim /etc/resolvconf/resolv.conf.d/base # 添加如下内 ...
- Linux学习之01_基础命令介绍
初学Linux,还在摸索中,在这个过程中希望能记录下学习到的东西,参考的的书籍为<鸟哥的Linux私房菜> 在这里学到的主要命令有这几个: data cal bc man shutdown ...
- webpack+vue-cli中proxyTable配置接口地址代理详细解释
在vue-cli项目中config目录里面的index.js配置接口地址代理,详细解释如下图所示:
- 微信公众号 sign类
微信公众号 Sign import java.util.UUID; import java.util.Map; import java.util.HashMap; import java.util.F ...
- Linux上安装禅道
linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...
- Linux环境下RPM包相互依赖的解决办法
Linux环境下安装Oracle11gR2提示缺少"Package: elfutils-libelf-devel-0.125 FAILED"包,按照提示安装该包时又提示缺少依 ...
- 喜欢Swift编程语言的人主要是初学者?
一早一起来,朋友圈除了被苹果发布会刷屏外,还漫天散布着一条类似的招聘消息:“招聘iOS程序员,要求拥有5年的Swift开发经验,有狼性,待遇月薪20K+,专车接送.” 随后身边的朋友很快就开始调侃:& ...