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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
POST提交数据常见的四种方式
Jan 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 闭包特性在实际应用中的问题
2009/10/30 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php处理复杂xml数据示例
2016/07/11 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python实现登陆文件验证方法
2018/10/06 Python
python实现图片筛选程序
2018/10/24 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
房地产公司见习自我鉴定
2014/04/28 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
发票退票证明
2015/06/24 职场文书
初中语文教学随笔
2015/08/15 职场文书
关于做家务的心得体会
2016/01/23 职场文书
《灰雀》教学反思
2016/02/19 职场文书