(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. 信用评分卡(A卡/B卡/C卡)的模型简介及开发流程|干货

    https://blog.csdn.net/varyall/article/details/81173326 如今在银行.消费金融公司等各种贷款业务机构,普遍使用信用评分,对客户实行打分制,以期对客户 ...

  2. HTTP笔记1

    传输层:提供进程地址 TCP:传输控制协议,面向连接的协议:通信前需要建立虚拟链路:结束后拆除链路.端口号:0-65535 UDP:用户报文协议,无连接的协议.端口号:0-65535 IANA(互联网 ...

  3. javascript ----字符串的使用

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. react中对于key值的理解

    1.key是用来帮助react识别哪些内容被更改.添加或者删除.key需要写在用数组渲染出来的元素内部,并且需要赋予其一个稳定的值.如果key值发生了变更,react则会触发UI的重渲染. 2.在相邻 ...

  5. opencv学习之路(37)、运动物体检测(二)

    一.运动物体轮廓椭圆拟合及中心 #include "opencv2/opencv.hpp" #include<iostream> using namespace std ...

  6. Django路由控制

    本文目录 一 Django中路由的作用 二 简单的路由配置 三 有名分组 四 路由分发 五 反向解析 六 名称空间 七 django2.0版的path 回到目录 一 Django中路由的作用 URL配 ...

  7. Python3 tkinter基础 Radiobutton 设置相同的value值,产生连锁效果

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. fmt.Sprintf格式化使用

    格式化写法: fmt.Sprintf(格式化样式, 参数列表-) 参数说明: 格式化样式:字符串形式,格式化动词以%开头. 参数列表:多个参数以逗号分隔,个数必须与格式化样式中的动词个数对应,否则运行 ...

  9. SQL server 批量插入和更新数据

    批量插入数据 insert into A表数据库名.[dbo].A(a,b,c) (select a,b,c from B表数据库名.[dbo].B) 批量更新数据 根据身份证第二位更新性别 upda ...

  10. scala链接mysql

    方法一:链接并操作mysql //链接Mysqlval driver = "com.mysql.jdbc.Driver"val url = "jdbc:mysql://1 ...