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 相关文章推荐
详解CSS中iconfont的使用
Aug 04 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 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和MySql中计算时间差的方法
2011/04/22 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript 对象的定义方法
2007/01/10 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
详解python中的异常捕获
2020/12/15 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
文史专业毕业生自荐信
2013/11/17 职场文书
教师的实习鉴定
2013/12/15 职场文书
党务公开方案
2014/05/06 职场文书
护士求职信范文
2014/05/24 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
MySQL 原理与优化之Update 优化
2022/08/14 MySQL