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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 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 at(@)符号的用法简介
2009/07/11 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python定时器实例代码
2017/11/01 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python async with和async for的使用
2019/06/20 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
质检的岗位职责
2013/11/17 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
节能宣传周活动总结
2014/05/08 职场文书
保护环境建议书100字
2014/05/13 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python