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中transform变换模型的渲染
May 27 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
HTML中link标签属性的具体用法
May 07 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
php 图片上传类代码
2009/07/17 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python多线程编程简单介绍
2015/04/13 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python函数式编程
2017/07/20 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
买卖车协议书
2014/04/21 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
天河观后感
2015/06/11 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书