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,设置背景主题
随机推荐
- websocket简单实例
只需要两个文件即可,一个服务端,一个前端,一下示例为模拟简单的聊天程序: 服务端: package com.test.websocket; import java.io.IOException; im ...
- 《跟我学IDEA》三、实用配置(行号、提示、代码等)
上一篇博文我们介绍了idea如何配置一个maven,git,tomcat等,这一篇我们来进行一些常用设置,这些也正是idea可爱之处,大大提高了开发的效率. 第一节:idea常用配置显示行数.显示方法 ...
- 从一篇ICLR'2017被拒论文谈起:行走在GAN的Latent Space
同步自我的知乎专栏文章:https://zhuanlan.zhihu.com/p/32135185 从Slerp说起 ICLR'2017的投稿里,有一篇很有意思但被拒掉的投稿<Sampling ...
- 【转载】解决refreshing gradle project 和Building gradle project info 一直卡住\速度慢
转载: http://blog.csdn.net/xx326664162/article/details/52002616 文章出自:薛瑄的博客 分析原因: 更改Gradle的版本后,或者更新AS后, ...
- java 拦截器
一.前言 这是一篇关于 java 拦截器的文章,是我的写 java web 所遇见的问题.当我们写好一个网站,必须要通过登陆页面才可以进入这个系统.那么我们就得写个 java 拦截器,如果是通过登录 ...
- docker容器自动退出的问题
如果用了一段时间的docker就会发现,我们的容器经常用了一段时间就自动退出了,docker ps已经找不到了,在docker ps -a里面了,然后我们docker start containerI ...
- 【java】实例化对象的3种方式:new、clone、反射
实例化对象的3种方式:new.clone.反射
- Python学习日记:day9--------函数
初识函数 1,自定义函数 s ='内容' #自定义函数 def my_len():#自定义函数没有参数 i =0 for k in s: i+=1 print(i) return i #返回值 my_ ...
- Java I/O---输入与输出
编程语言的I/O类库中常使用流这个抽象概念, 它代表任何有能力产出数据的数据源对象或者是有能力接收数据的接收端对象. "流" 屏蔽了实际的I/O设备中处理数据的细节.Java类库中 ...
- intelij Android 搭建 java 项目
1.打开ide创建页面,点击创建项目 2.选择Android,发现下面有一段红字,解释很清楚,由于第一使用为设置Android的开发环境sdk,去设置一下就好,点击取消回到上一界面 3 配置 4.当然 ...