js 抓取屏幕宽度设置字体大小 rem
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的更多相关文章
- js控制手机端字体大小rem
//得到手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; if(ht ...
- 【转】CSS3的REM设置字体大小
rem 长度单位 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...
- CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
- rem根据网页的根元素(html)来设置字体大小
rem根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小
- 解决因为手机设置字体大小导致h5页面在webview中变形的BUG
首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...
- CSS3字体大小rem属性用法
PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...
- eclipse怎么设置字体大小
eclipse怎么设置字体大小
- 【转】eclipse怎么设置字体大小
原文网址:http://jingyan.baidu.com/article/f96699bb9442f3894e3c1b15.html 1. 打开eclipse,找到window 2. 点击后在下拉 ...
- android studio 更改背景和设置字体大小
1,设置字体大小 2,设置背景主题
随机推荐
- Android Api 检查參数状态Api
转载请注明出处:http://blog.csdn.net/droyon/article/details/39938677 在进行Android应用程序开发中,android提供了一个非常好的工具类,来 ...
- 我的GIS观
申明: 文章所述观点与不论什么组织或个人无关,仅代表我个人观点,如有不正确,还望批评指正. 概述: 从毕业到如今,在GIS这条路上也算是摸爬滚打4.5年了.说长也不长,说短也不短.在这4.5年的时间里 ...
- webpack+babel项目在IE下报Promise未定义错误引出的思考
低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...
- 自学Python2.5-基本数据类型-set集合
Python set集合 一. set集合概述 ①set集合,是一个无序且不重复的元素集合.②集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.③集合支持用in和not in操作符检查成员 ...
- 关于redis的使用
距离上次写博客有两三个月了,这段时间去了新公司上班,忙了很多.接手了一个项目,刚好用到redis,先总结下遇到的问题(跟redis相关的问题): 1.列表问题 举例:展示商品列表,但是要先展示运营置顶 ...
- java String,StringBuffer和StringBulder学习笔记
1.String:不可改变的Unicode字符序列. 池化思想,把需要共享的数据放在池中,用一个存储区域来存放一些公用资源以减少存储空间的开销. 在String类中,以字面值创建时,回到java方法空 ...
- iOS OC应用异常捕获,崩溃退出前返回信息给后台
第三方的了,有友盟,腾讯的bugly 查了一下网上类似的代码很多,在借鉴前辈的代码后,组合了一下: 1.捕获异常信息 2.获得当前日期,版本,系统 3.获得出bug的视图控制器转为字符串 4.将前3条 ...
- [置顶]
Xamarin Android安装教程(2016最新亲测安装版)
写这篇安装教程前要说的几句话 之前很多人想用Vs来开发Android项目,苦于这个环境的安装.的确这并不是一件简单的事情,并不是开发者都能在花一上午能装好,如果你花了一天时间,第一个Xamarin ...
- c#$用法
为什么会出现$符号,c#6.0才出现的新特性 var s = string.Fromat("{0}+{1}={2}",12,23,12+23) 用起来必须输入string.From ...
- UVALive 4850 Installations
题目大意:有若干个任务,每个任务耗时si,期限为di,同一时间只能做一个任务.对于一个任务,惩罚值为max(0,完成时间-期限).问怎么安排,使(最大惩罚值+次大惩罚值)最小,O(n^2). 如果没有 ...