(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);

  第二种方法

(function() {
var newRem = function() {
var html = document.documentElement;
html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px';
};
window.addEventListener('resize', newRem, false);
newRem();
})();

  

rem 转 px的更多相关文章

  1. rem与px的转换

    rem与px的转换 引用自http://caibaojian.com/rem-and-px.html A-A+ 前端博客•前端开发教程•rem•3702View0 rem是相对于根元素<html ...

  2. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  3. EM vs REM vs PX,为什么你不应该”只用px“”

    Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...

  4. rem与px之间的换算(移动端)

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  5. 简谈CSS 中的 em,rem,px,%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  6. rem和px

    做过一段时间的H5页面,但是对于rem与px的换算还是比较模糊,总是引用一段脚本,也没有深究过为什么,就稀里糊涂的用了,遇到一些细微的地方,总是不知道是什么原因导致的,我总是只要能完成效果就行,全然不 ...

  7. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  8. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

  9. em换算px,rem换算px

    <body> <style type="text/css" rel="stylesheet"> html,body{ font-size ...

  10. rem 与 px 手机页面自适应

    rem相对于根元素html的,em相对于父元素的.rem和em相对大小的值默认情况下如果你没有在根元素指定参照值,那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px,那 1rem ...

随机推荐

  1. vue单文件组件实例2:简单单文件组件

    ​ Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...

  2. 4.产生10个1-100的随机数,并放到一个数组中 (1)把数组中大于等于10的数字放到一个list集合中,并打印到控制台。 (2)把数组中的数字放到当前文件夹的numArr.txt文件中

    package cn.it.text; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLis ...

  3. Dio添加Cookie

    在使用Options添加headers时,Map没有定义内部类型: Dio dio = new Dio(); Map headers = new Map(); headers['Cookie'] = ...

  4. xampp——apache服务启动问题(端口占用)

    Apache启动提示 20:39:02 [Apache] Error: Apache shutdown unexpectedly.20:39:02 [Apache] This may be due t ...

  5. 小试wsl

    安装 管理员权限运行powershell,执行如下命令: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Su ...

  6. phtyon

    https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014316399410395 ...

  7. EmberJS 为什么我偏爱 Ember.js 胜过 Angular 和 React.js

    文章写的很老到,非常值得一看!评论也很精彩,值得一看 为什么我偏爱 Ember.js 胜过 Angular 和 React.js 前几天看到了这篇文章:Why I prefer Ember.js ov ...

  8. 十个经典的Python面试题

    1.Python下多线程的限制以及多进程中传递参数的方式 Python多线程有个全局解释器锁,这个锁的意思是任一时间只能有一个线程运用解释器.并发不是并行. 多进程间同享数据,能够运用multipro ...

  9. Java基础之数组(一)

    数组的定义 数组是相同类型数据的有序集合.数组描述的是相同类型的若干个数据,按照 一定的先后次序排列组合而成.其中,每一个数据称作一个元素,每个元素可以通过一个索引(下标)来访问它们.数组的三个基本特 ...

  10. CocoaPods 中删除不需要的第三方

    1...打开Podfile  找到不需要的类库,直接删除 2...打开终端cd到当前项目的根目录下重新执行pod install --verbose --no-repo-update命令(更新一下) ...