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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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的计数器程序
2006/10/09 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
Python中取整的几种方法小结
2017/01/06 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Python多图片合并PDF的方法
2019/01/03 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
详解pandas赋值失败问题解决
2020/11/29 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
小学生班会演讲稿
2014/01/09 职场文书
大学生军训广播稿
2014/01/24 职场文书
表彰大会主持词
2014/03/26 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
阅兵口号
2014/06/19 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
护士2014年终工作总结
2014/11/11 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
创业计划书之农家乐
2019/10/09 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
浅谈Python数学建模之线性规划
2021/06/23 Python
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python