JS根据浏览器窗口大小实时动态改变网页文字大小的方法


Posted in Javascript onFebruary 25, 2016

本文实例讲述了JS根据浏览器窗口大小实时动态改变网页文字大小的方法。分享给大家供大家参考,具体如下:

目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小。

代码如下:

<script>
 /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */
 function placeholderPic(){
  var w = document.documentElement.offsetWidth;
  document.documentElement.style.fontSize=w/20+'px';
 }
 placeholderPic();
 window.onresize=function(){
  placeholderPic();
 }
</script>
Javascript 相关文章推荐
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 #Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 #Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 #Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 #Javascript
JavaScript实现多种排序算法
Feb 24 #Javascript
JavaScript中的时间处理小结
Feb 24 #Javascript
JS设置cookie、读取cookie
Feb 24 #Javascript
You might like
PHP智能识别收货地址信息实例
2019/01/05 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
js模拟实现Array的sort方法
2007/12/11 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Python计算IV值的示例讲解
2020/02/28 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
单位门卫岗位职责
2013/12/20 职场文书
经典大学生求职信范文
2014/01/06 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
社区安全温馨提示语
2015/07/14 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL