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. redis 简单安装使用

    官方站点:http://redis.io/ 官方下载:http://redis.io/download 能够依据须要下载不同版本号 windows版:https://github.com/mythz/ ...

  2. More DETAILS! PBR的下一个发展在哪里?

    最近几年图形学社区对PBR的关注非常高,也许是由于Disney以及一些游戏引擎大厂的助推,也许是因为它可以被轻松集成进实时渲染的游戏引擎当中,也许是因为许多人发现现在只需要调几个参数就能实现具有非常精 ...

  3. SSH简单项目

    这是我学习SSH整合时的一个测试项目,代码比较简单 整个项目实现从数据库中取数据,在页面上显示.项目的结构如下: (1)数据库设计 数据库使用的是student数据库中的一个数据库表grade,表的内 ...

  4. 企业级nosql数据库应用与实战-redis

    一.NoSQL简介 1.1 常见的优化思路和方向 1.1.1 MySQL主从读写分离 由于数据库的写入压力增加,Memcached只能缓解数据库的读取压力.读写集中在一个数据库上让数据库不堪重负,大部 ...

  5. 《程序设计语言——实践之路》【PDF】下载

    程序设计语言--实践之路>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 本书在美国大学已有使用了十余年,目前被欧 ...

  6. 【批处理】shift用法举例

    @echo off set sum=0 call :sub sum 1 2 3 4 echo sum=%sum% pause :sub set /a %1=%1+%2 shift /2 if not ...

  7. iOS Swift基础知识代码

    推荐:Swift学习使用知识代码软件 //集合类型 数组 字典 func array1(){ var arr = [","dd"] //简单写法 var arr1 = [ ...

  8. Swift基础学习

    Swift基础学习  http://c.biancheng.net/cpp/html/2242.html 这个网站最近看了一下,对于基本语法解释概括的相对全面,如同重新练习一遍OC似的,挺全面的,谢谢 ...

  9. 完善chrome翻译插件ChaZD,支持有道智云api

    首先放上该项目的github地址:https://github.com/codethereforam/ChaZD 之前想找一个chrome支持划词翻译的插件,最终在知乎上看到了这个回答,推荐的是Cha ...

  10. P神的SDFZ考试题 C题

                                                                      探险[问题描述]          探险家小 T 好高兴! X 国要 ...