(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

引用这个js定下基数,

引自:http://www.jianshu.com/p/b00cd3506782

换算方法:http://pxtoem.com/

一般以56为基数

移动端使用rem方法的更多相关文章

  1. M端计算rem方法

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

  2. 移动端H5适配方法(盒子+图片+文字)

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  3. Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)

    Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...

  4. keyup在移动端失效解决方法

    keyup在移动端失效解决方法: $("#OBJ").on("input propertychange", function(){ }); 采用 input 与 ...

  5. viewport原理和使用和设置移动端自适应的方法(移动适应电脑)

    viewport原理和使用和设置移动端自适应的方法 HTML中: <meta name="viewport" content="width=device-width ...

  6. PHP防止被重复请求接口的方法(网页端签名验证的方法)

    PHP防止被重复请求接口的方法(网页端签名验证的方法) 可以采取签名验证的方式来 解决这个问题 1 time和随机数都是PHP生成的显示在前端 2 前端生成sign 3 进行每次请求的sign计数 这 ...

  7. 5种kafka消费端性能优化方法

    摘要:带你了解基于FusionInsight HD&MRS的5种kafka消费端性能优化方法. 本文分享自华为云社区<FusionInsight HD&MRSkafka消费端性能 ...

  8. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  9. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

随机推荐

  1. UVA 1610 Party Games

    题意: 给出一系列字符串,构造出一个字符串大于等于其中的一半,小于另一半. 分析: 取大小为中间的两个a,b(a<b).实际上就是找出第一个小于b的同时大于等于a的字符串,直接构造即可. 代码: ...

  2. Oracle如何禁止并行

    PURPOSE -------   To explain how to disable Parallel Execution on Session/System level     SCOPE &am ...

  3. ZRender源码分析5:Shape绘图详解

    回顾 上一篇说到:ZRender源码分析4:Painter(View层)-中,这次,来补充一下具体的shape 关于热区的边框 以圆形为例: document.addEventListener('DO ...

  4. 自学HTML5第三节(拖放效果)

    今天来看看网页上的拖放效果,首先来看看什么是拖放———— 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Inte ...

  5. 四条命令搞定mysql主从

    一 . 环境准备 先上拓扑图

  6. nginx,wsgi,flask之间的关系

    之前看写flask 应用的一些疑问,百度上的答案解释的不错,这里记着以后可以看看Web 服务器层对于传统的客户端 - 服务器架构,客户端向服务器发送请求,服务器接收请求,处理请求,最后给客户端返回请求 ...

  7. Python:staticmethod vs classmethod

    Being educated under Java background, static method and class method are the same thing. But not so ...

  8. vs2008调试 Release(链接器来生成调试信息)

    VS2008 Release 修改配置: 1.项目——>属性——>C/ C++ ——> 常规 ——>调试信息格式——>用于“编辑并继续”的程序数据库(/ZI) 2.项目— ...

  9. node.js安装和启动

    在Windows上安装 Node.js十分方便,我们只需要访问node.js官网http://www.nodejs.org/,点击Download链接,然后选择Windows Installer(32 ...

  10. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...