(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. 对java多态的理解

    java多态,如何理解父类引用指向子类对象 要理解多态性,首先要知道什么是“向上转型”. 我定义了一个子类Cat,它继承了Animal类,那么后者就是前者是父类.我可以通过 Cat c = new C ...

  2. Spring的事务

    事务:事务指的是逻辑上的一组操作,这组操作要么都成功,要么都失败. Transaction事务的四大特性ACID: 1.Atomicity原子性 事务的操作要么都成功,要么都不做,只要有一个失败,就会 ...

  3. [Python数据挖掘]第3章、数据探索

    1.缺失值处理:删除.插补.不处理 2.离群点分析:简单统计量分析.3σ原则(数据服从正态分布).箱型图(最好用) 离群点(异常值)定义为小于QL-1.5IQR或大于Qu+1.5IQR import ...

  4. [pycocotools修改]cocoeval.py

    __author__ = 'tsungyi' import numpy as np import datetime import time from collections import defaul ...

  5. Linux 系统调用(system call)

    1 系统调用:(SYSTEM CALL) 操作系统(operating system)内核中有一组实现系统功能的过程,系统调用就是对上述过程的调用.程序员利用系统调用,向OS提出服务请求,由OS代为完 ...

  6. Magento 2.2.5和2.2.6的bug 产品设置special price又删除后价格排序有误

    Magento 2.2.5和2.2.6的bug 产品设置special price又删除后价格排序有误 一.问题描述:版本2.2.5和2.2.6均有此问题,为Magento2的系统bug.为产品设置s ...

  7. Android 全局使用第三方字体

    给APP全局设置字体主要分为两个方面来介绍 一.给原生界面设置第三方字体 1.准备工作-下载第三方字体:传送门 将文件放入工程assets目录下.(一般个人习惯单独命名一个文件夹放字体文件,也可直接放 ...

  8. nodejs中使用crypto-js先HmacSha1加密后转Base64

    1. 先HmacSha1后Base64 var HmacSha1 = require('crypto-js/hmac-sha1') ;var Base64 = require('crypto-js/e ...

  9. Markdown介绍

    如何使用.md文件 本文档为Markdown格式,建议利用Visual Studio Code+ Markdown All in One插件修改.参考链接:基础mdbasic,高级mdextended

  10. 深入浅出ES6:不定参数和默认参数

    不定参数 我们通常使用可变参函数来构造API,可变参函数可接受任意数量的参数.例如,String.prototype.concat方法就可以接受任意数量的字符串参数.ES6提供了一种编写可变参函数的新 ...