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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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闭包(Closure)使用详解
2013/05/02 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Python识别验证码的实现示例
2020/09/30 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
Ruby如何创建一个线程
2013/03/10 面试题
爱护花草树木的标语
2014/06/11 职场文书
幼儿园标语大全
2014/06/19 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python