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>
js根据浏览器窗口大小实时改变网页文字大小的更多相关文章
- 用javascript动态改变网页文字大小
<script>function setFontSize(size){document.getElementById('bottom').style.fontsize=size+'pt'; ...
- JS 获取浏览器窗口大小
JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
- js获取浏览器窗口大小
摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if ...
- JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- js | javascript实现浏览器窗口大小被改变时触发事件的方法
转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 代 ...
- JS 获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- javascript实现浏览器窗口大小被改变时触发事件的方法
转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信 ...
随机推荐
- 【译】安装Sonar要求
本文仅为本人看sonar官方文档时,因其为英文,故简单整理翻译[英语不好,见谅!] http://docs.sonarqube.org/display/SONAR/Requirements 目录 ...
- Hbuilder连接模拟器调试
Hbuilder是一个非常好用的HTML5开发IDE,我最喜欢的功能就是连接手机调试了,连接手机调试有两种途径,一是通过USB连接真机,二是下载安装一个安卓模拟器,让Hbuilder连接到安卓模拟器, ...
- Intent传递类实例
发送方: Intent intent = new Intent(); intent.setClass(mContext, HomeDetailReportActivity.class); intent ...
- 64位ubuntu下重新编译hadoop2.2流水账
hadoop官方网站中只提供了32位的hadoop-2.2.0.tar.gz,如果要在64位ubuntu下部署hadoop-2.2.0,就需要重新编译源码包,生成64位的部署包.建议以下操作使用roo ...
- 对于JSP的调试
在eclipse中调试JSP 我换了图片但是网页中的图片却不变化 我删了工程里的图片还是没用 看了一下Tomcat根目录..貌似也是没有的.. 最后我考虑换了HTML中图片的名字..并且更改了替换的图 ...
- HTML5_ScrollInToView方法
scrollIntoView(ture)元素上边框与视窗顶部齐平 scrollIntoView(false)元素下边框与视窗底部齐平 <html> <head> <tit ...
- Java利用POI导入导出Excel中的数据
首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...
- Liferay 6.2 改造系列之二十二:如何发布WAR包
1.修改web资源并发布 如果修改了默认主题信息,需执行portal-web中的build-themes任务: 执行portal-web中的deploy任务: 2.修改portal-impl中的jav ...
- Android 编程下 ListView 的 HeaderView 和 FooterView 不可选择点击
在 ListView 里,HeaderView 和 FooterView 也占一行,与其他的 item 一样,可以点击,有索引,HeaderView 的索引为0.如果要使这两项不可点击,可以使用下面的 ...
- 20145223《Java程序程序设计》第3周学习总结
20145223 <Java程序设计>第3周学习总结 教材学习内容总结 第四章内容 1.类与对象 如何定义一个包含有几个值域(Field成员)就是需要我们定义一个类(Class),书上给的 ...