var doc = window.document
var docEl = doc.documentElement
var tid

function refreshRem () {
var width = docEl.getBoundingClientRect().width
if (width > 540) { // 最大宽度
width = 540
}
var rem = width / 7.5 // 将屏幕宽度分成750份,1份为1rem 375屏刚好0.5px
docEl.style.fontSize = rem + 'px'
}

window.addEventListener('resize', function () {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}, false)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}
}, false)

refreshRem()

(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 = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

js 抓取屏幕宽度设置字体大小 rem的更多相关文章

  1. js控制手机端字体大小rem

    //得到手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; if(ht ...

  2. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

  3. CSS3的REM设置字体大小

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  4. rem根据网页的根元素(html)来设置字体大小

    rem根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小

  5. 解决因为手机设置字体大小导致h5页面在webview中变形的BUG

    首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...

  6. CSS3字体大小rem属性用法

    PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...

  7. eclipse怎么设置字体大小

    eclipse怎么设置字体大小

  8. 【转】eclipse怎么设置字体大小

    原文网址:http://jingyan.baidu.com/article/f96699bb9442f3894e3c1b15.html 1. 打开eclipse,找到window 2.  点击后在下拉 ...

  9. android studio 更改背景和设置字体大小

    1,设置字体大小 2,设置背景主题

随机推荐

  1. OpenTK教程-0序言

    记得很久之前,我写过一个基于.NET的3D开发框架/工具比较.当时选定的技术是WPF.但是随着项目发展,需要处理的图形数量越来越多,基于WPF的处理起来性能有问题,最后还是使用了基于OpenTK的解决 ...

  2. 根据实践经验,讲述些学习Java web能少走的弯路,内容摘自java web轻量级开发面试教程

    在和不少比较上进的初级程序员打交道的过程中,我们总结出了一些能帮到合格程序员尽快进阶的经验,从总体上来讲,多学.多实践不吃亏.本文来是从 java web轻量级开发面试教程从摘录的. 1  哪些知识点 ...

  3. web项目启动流程探索

    在web项目的启动过程中,我们希望知道它的一般流程是什么,这样我们就可以在各个流程中加入相应的功能,或者对于我们排错也有帮助. 我们知道,当我们启动tomcat容器以后,容器首先初始化一些必要的组件, ...

  4. 【转载】Spring AOP详解 、 JDK动态代理、CGLib动态代理

    Spring AOP详解 . JDK动态代理.CGLib动态代理  原文地址:https://www.cnblogs.com/kukudelaomao/p/5897893.html AOP是Aspec ...

  5. JavaScript操作符(一元操作符)

    JavaScript操作符包括算术操作符.位操作符.关系操作符和相等操作符.只能操作一个值的操作符叫做一元操作符. 递增和递减操作符 递增和递减操作符有两个版本:前置型和后置型.前置型操作符位于要操作 ...

  6. gunicorn 信号处理(SIGHUP,SIGUSR2)

    在这篇文章中,提到了Master进程对信号的处理函数,其中有两个信号比较有意思. SIGHUP:用来热更新(Reload)应用 SIGUSR2:用来在线升级(upgrade on the fly)gu ...

  7. python串口调试,M3650B-HA调试

    使用python serial与M3650B-HA(RFID读写器)串口通信 环境:py3.6 模块:pyserial 1.serial模块安装2.废话不多说,直接上代码,测试环境py3.6 # co ...

  8. jspsmart(保存文件)+poi(读取excel文件)操作excel文件

    写在前面: 项目环境:jdk1.4+weblogic 需求:能上传excel2003+2007 由于项目不仅需要上传excel2003,还要上传excel2007,故我们抛弃了jxl(只能上传exce ...

  9. 小白的Python之路 day2 文件操作

    文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 ...

  10. 【java】ArrayList、Iterator用法

    package com.tn.collect; import java.util.ArrayList; import java.util.Iterator; class Product{ public ...