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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
javascript的事件描述
2006/09/08 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python 实现归并排序算法
2012/06/05 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
儿童学习python的一些小技巧
2018/05/27 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python修改文件内容的3种方法详解
2019/11/15 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
教师民族团结演讲稿
2014/08/27 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
企业团队精神心得体会
2016/01/19 职场文书
商业计划书格式、范文
2019/03/21 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python