html5响应式开发自动计算fontSize的方法


Posted in HTML / CSS onJanuary 13, 2020

本文介绍了html5响应式开发自动计算fontSize的方法,分享给大家,具体如下:

var winWidth = window.innerWidth;  
var winHeight = window.innerHeight; 
//获得屏幕的宽度   rem=屏幕宽度/7.5+"px"
var perRemPx = document.getElementsByTagName("html")\[0\].clientWidth / 7.5;  
  //动态计算
window.addEventListener("resize", function () {  
//获得屏幕的宽度   rem=屏幕宽度/7.5+"px"
    perRemPx = document.getElementsByTagName("html")\[0\].clientWidth / 7.5;  
     //将得到的rem值复制给根元素的font-size
  document.getElementsByTagName("html")\[0\].style.fontSize \= perRemPx + "px";  
});  
//  将得到的rem值复制给根元素的font-size
document.getElementsByTagName("html")\[0\].style.fontSize \= perRemPx + "px";

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3实现毛玻璃效果示例源码
Sep 25 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 #HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 #HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 #HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 #HTML / CSS
HTML5自定义视频播放器源码
Jan 06 #HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 #HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 #HTML / CSS
You might like
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
js中生成map对象的方法
2014/01/09 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python递归函数绘制分形树的方法
2018/06/22 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
酒店营销策划方案
2014/02/07 职场文书
迎新生标语大全
2014/10/06 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
安全承诺书
2015/01/19 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android