(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';

};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

计算rem的更多相关文章

  1. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  2. 根据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...

  3. 依据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最常常使用的单位. 为解决自适应的问题.我们须要动态的给文档的更节点加入font-size 值.使用mediaquery 能够解决问题,可是每个文件都引用一大串 ...

  4. 动态计算rem的js代码

    以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...

  5. M端计算rem方法

    (function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460 ...

  6. 根据屏幕尺寸计算rem

    !(function (doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in w ...

  7. 大前端学习笔记整理【五】rem与px换算的计算方式

    前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要 ...

  8. 移动端rem计算

    教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872    版权声明:本文为博主原创文章,未经博主允许不得转载. h ...

  9. css rem计算

    先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...

随机推荐

  1. 从入门到放弃之IO

    浅说IO 学到现在利用过的特殊符号不少组合起来很多都有让人眼前一亮的用法,在这里先聊聊I/O的一些相关知识. 本文开始之前先介绍一下需要知道的一些小知识和需要注意的地方. 在linux中也是有优先级的 ...

  2. Unable to open debugger port (127.0.0.1:51554): java.net.SocketException "socket closed"

    刚开始使用IDEA 总是有各种各样奇葩的问题 启动报错: Unable to open debugger port (127.0.0.1:51554): java.net.SocketExceptio ...

  3. 变量值a交换b,b交换a....

    package day01; public class Test1 { public static void main(String[] args) { //不利用其它变量时期A和B的值交换 Inte ...

  4. PHP(一)OOP基础

    [面向过程&面向对象] 1.面向过程:专注于解决一件事情的过程.最大的特点,是有一个个函数来实现功能需求 2.面向对象:专注于有哪一个对象来实现这个功能,最大的特点,时产生一个个具有属性和方法 ...

  5. Mysql修改已有数据的字符集

    Mysql修改已有数据的字符集 问题 在生产环境中跑了很久,发现MysqlClient连接的字符集是默认的latin1,我们一直以为都是utf8,造成这样的误解,是因为在内网环境中,我们是源码编译的M ...

  6. cloneNode克隆节点在不同浏览器的差异

    cloneNode是用于克隆节点的,如果待克隆的节点还有子节点以及自定义属性.添加的有事件,那么克隆时,可以指定是克隆节点本身,还是将其所有子节点信息也克隆进去,这是通过给cloneNode传递一个布 ...

  7. Luogu P1541 乌龟棋(NOIP2010TG)

    自己的第一篇博文 祭一下祭一下 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点, ...

  8. 常见的XSS攻击代码

    第一类: <tag on*=*/> 在html标签事件中触发,典型的是on*事件,但是这种触发模式的缺陷在于不能直接触发所以更多的需要配合使用. eg: 1.使html元素占据整个显示页面 ...

  9. EasyWcf------无需配置,无需引用,动态绑定,轻松使用

    设计原则:万物皆对象 前言:在上一篇的0配置使用Wcf中,虽然使用已经很方便了,但是对于最求极致简洁得人来说(比如我),客户端需要通过手动引用服务才能够调用服务接口,那么有没有办法能够绕过手动引用这一 ...

  10. 小米/红米导入VCF联系人乱码问题解决

    PS:尽量不要用什么豌豆荚啊.微信啊.QQ啊之类的通讯录备份,那就等于把自己的通讯录免费送给腾讯他们了....还是自己手动的好一些,但是小白用户或者经常丢手机的卖就卖吧,总比联系人都丢了要好~~~ 默 ...