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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
论建造顺序的重要性
2020/03/04 星际争霸
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python实现五子棋小程序
2019/06/18 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
python 项目目录结构设置
2020/02/14 Python
Python super()方法原理详解
2020/03/31 Python
pandas分组聚合详解
2020/04/10 Python
同居协议书范本
2014/04/23 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
二十年同学聚会感言
2015/07/30 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js