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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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数组索引与键值操作技巧实例分析
2015/06/24 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Python二分查找详解
2015/09/13 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python实现网页录音效果
2020/10/26 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
测量实习生自我鉴定
2013/09/19 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
年会活动策划方案
2014/01/23 职场文书
遗嘱继承公证书
2014/04/09 职场文书
英语故事演讲稿
2014/04/29 职场文书
会计学专业求职信
2014/07/17 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
银行授权委托书样本
2014/10/13 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
红色革命电影观后感
2015/06/18 职场文书
教导处教学工作总结
2015/08/12 职场文书
详解Redis瘦身指南
2021/05/26 Redis