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,设置背景主题
随机推荐
- Parcel.js + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- RUP 方法简介
1.什么是RUP: Rational Unified Process(以下简称RUP) 是一套软件工程方法,主要由 Ivar Jacobson的 The Objectory Approch 和 The ...
- 个人作业2:APP案例分析
产品 产品名 网易云音乐 选择原因 除社交软件和浏览器以外,在手机里存在最久的也是使用次数最多的APP就是它了.不管换多少次手机和电脑,它始终在我的装机必备名单上. 调研与评测 第一次上手体验 第一次 ...
- websocket简介
在我们做web项目的过程中,经常需要做的一个模块是消息模块.典型的场景:一个商城系统的后台管理,我想实现如果前台有客户下单,后台就会接到消息,以便尽快发货处理. 要实现上述的功能,我们有几种备选的方案 ...
- cglib动态代理举例
jdk的动态代理是基于接口的代理,而cglib不要求实现接口,是一种基于继承的代理,使用字节码生成被代理类的子类 public class TestMethodInterceptor implemen ...
- Error updating database. Cause: java.sql.BatchUpdateException: Field 'id' doesn't have a default value
异常信息 ### Error updating database. Cause: java.sql.BatchUpdateException: Field 'id' doesn't have a de ...
- python字典的操作
思维导图如下 1.字典的增加 dic1={'name':'wujie','age':18,'gender':'男'} dic1['profession']='python全栈' dic1.setdef ...
- idea的mybatis的xml文件总是报警告SQL dialect is not configured
警告: No data sources are configured to run this SQL and provide advanced code assistance. Disable thi ...
- [array] leetcode - 40. Combination Sum II - Medium
leetcode - 40. Combination Sum II - Medium descrition Given a collection of candidate numbers (C) an ...
- Xamarin截取/删除emoji表情bug解决方案
大家都知道,一个英文=1字节,一个汉字2字节,而一个emoji表情=4个字节,在有这三种混用的时候,比如app聊天界面,那么删除和截取便成了很头痛的事情. 问题描述 截取导致乱码,如下图: 解决方案 ...