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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 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程序?
2006/12/08 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
五段实用的js高级技巧
2011/12/20 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python实现中文输出的两种方法
2015/05/09 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python引用计数操作示例
2018/08/23 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题