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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 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/11/25 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python识别验证码的思路及解决方案
2020/09/13 Python
介绍一下linux文件系统分配策略
2013/02/25 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
记账会计岗位职责
2014/06/16 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
任命书怎么写
2015/03/02 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
学生退学证明
2015/06/23 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang