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 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
Vue如何清空对象
Mar 03 Vue.js
你所未知的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的面试题集
2006/11/19 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
详解python 爬取12306验证码
2019/05/10 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
新学期开学寄语
2014/01/18 职场文书
座谈会主持词
2014/03/20 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Python基础之变量的相关知识总结
2021/06/23 Python
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL