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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
Ajxa常见问题都有哪些
2014/03/26 面试题
保险公司晨会主持词
2014/03/22 职场文书
给校长的建议书100字
2014/05/16 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
授权委托书协议书
2014/10/16 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL