JS根据浏览器窗口大小实时动态改变网页文字大小的方法
更新时间：2016年02月25日 09:23:11 作者：小坏
这篇文章主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
本文实例讲述了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>
PS：这里再为大家推荐一款非常好用的JavaScript压缩、格式化与加密工具，功能非常强大：
JavaScript压缩/格式化/加密工具：http://tools.jb51.net/code/jscompress
上面这款js工具中的加密功能可实现js代码的eval函数加密形式，对此本站还提供了如下这款针对eval函数加密的解密工具，非常强大实用！
js的eval方法在线加密解密工具：http://tools.jb51.net/password/evalencode
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 基于JS判断iframe是否加载成功的方法(多种浏览器）
- JavaScript编写检测用户所使用的浏览器的代码示例
- js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码
- JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
- 详解javascript跨浏览器事件处理程序
- js事件处理程序跨浏览器解决方案
- Js与Jq获取浏览器和对象值的方法
- 浏览器检测JS代码(兼容目前各大主流浏览器)
- 基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
- js阻止浏览器默认行为的简单实例
相关文章
style、 currentStyle、 runtimeStyle区别分析
style、 currentStyle、 runtimeStyle区别分析,需要的朋友可以参考下。2010-08-08
这篇文章主要给大家介绍了关于JavaScript常见数组方法之如何转置矩阵的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
网页上的原生js日历代码，鼠标点击文字提示处，会显示一个带年月日的日历窗口，可调整年份、月份、选择日期等，用在网页上方便大家选择日期，提高用户体验。各大浏览器都能正常运行，有需要的小伙伴可以参考下。2015-04-04
本篇文章主要是对javascript获取form里的表单元素的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
在javascript中，带小数的数据运算时总会出现好多位小数.这是因为在javascript中浮点数的计算是以2进制计算的2014-05-05
这篇文章介绍了javascript中类型判断的最佳方式，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
在输入框里面预设一段提示文字，当焦点在输入框的时候清空这段文字，这在目前来说已经不是什么新鲜事了。2011-03-03
虽然网上实现Ctrl + C的JS代码已经有很多了，但我还是向大家推荐一个比较好的插件zeroclipboard，兼容所有浏览器2010-08-08
这篇文章主要介绍了uni-app 滚动到指定位置的操作方法,其中方法一是使用标签,可以将页面横向（或纵向）滚动到指定位置还有其他多种方法,需要的朋友可以参考下2024-05-05
基于JS实现html中placeholder属性提示文字效果示例
这篇文章主要介绍了基于JS实现html中placeholder属性提示文字效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-04-04
最新评论