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单 ...
随机推荐
- Java IO 字节流与字符流 (二)
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...
- win7 32位解决matlab out of memory问题
由于最近在做DL,matlab load数据时由于内存只有2G,会出现out of memory的情况,网上百度了下都是在xp下打开3GB来解决该问题,但是由于win7没有boot.ini无法在win ...
- AngularJS 指令(意义)
angular.module('modulename') .directive('myDirective', function(){ return { restrict: 'EA', //E表示ele ...
- 常用开源<监控软件>介绍
转载地址:http://blog.csdn.net/lx_9986/article/details/6803243 一.Zenoss Core Zenoss Core是开源企业级IT管理软件-是智能监 ...
- nodejs常用命令
npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm install m ...
- Linux学习之01_基础命令介绍
初学Linux,还在摸索中,在这个过程中希望能记录下学习到的东西,参考的的书籍为<鸟哥的Linux私房菜> 在这里学到的主要命令有这几个: data cal bc man shutdown ...
- Linux安装MySQL标准教程
导读: 本文主要介绍 CentOS 系统二进制安装 MySQL 5.7.23 版本的安装步骤,其他版本安装过程相似. 1.前置准备 卸载旧版MySQL 查看rpm包 rpm -qa|grep mysq ...
- P2973 [USACO10HOL]赶小猪
跟那个某省省选题(具体忘了)游走差不多... 把边搞到点上然后按套路Gauss即可 貌似有人说卡精度,$eps≤1e-13$,然而我$1e-12$也可以过... 代码: #include<cst ...
- Python安装第三方包(setup.py)
在github上下载了records文件到本地. 解压文件 cmd切换到文件setup.py的目录下 先执行 python setup.py build 再执行python setup.py inst ...
- visual studio 2015安装
问题:安装过程老是报:安装包丢失或者损坏,但是去虚拟光驱里面可以查找到该安装包. 解决:可能文件下载ISO过程中丢失了一些数据.使用“Hash(MD5校验工具)”检测文件的“SHA-1”值,然后与官网 ...