目前,有了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根据浏览器窗口大小实时改变网页文字大小的更多相关文章

  1. 用javascript动态改变网页文字大小

    <script>function setFontSize(size){document.getElementById('bottom').style.fontsize=size+'pt'; ...

  2. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  3. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  4. js获取浏览器窗口大小

    摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小       // 获取窗口宽度   if ...

  5. JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  6. js | javascript实现浏览器窗口大小被改变时触发事件的方法

    转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 代 ...

  7. JS 获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  9. javascript实现浏览器窗口大小被改变时触发事件的方法

    转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信 ...

随机推荐

  1. [Java] xms xmx XX:PermSize XX:MaxPermSize 参数意义解析

    今天在做jmeter压力测试时又出现以前经常出现的异常,如下图,长时间不弄这个的,又有点不知所措了,所以干脆再来总结一下问题: 以前写过两篇文章,对这个问题研究过,见下面连接: 连接1:http:// ...

  2. win7-32 系统 + VS2010 配置 glew

    网上下载的程序,运行时报错:  C1083: 无法打开包括文件:“gl\glew.h”: No such file or directory. 百度一下,发现需要配置 glew 库. 方法如下: 下载 ...

  3. How to use the Visual Studio

    推荐一个提供VS配色方案的一个网站:StudioStyles,域名和网站同名:http://studiostyl.es/ 2. 整行剪切:Ctrl + X.光标不要选中任何文字,然后按这个快捷键就可以 ...

  4. PRD产品需求文档

    什么是PRD? PRD是Product Requirement Document的英文缩写,即产品需求文档的意思.PRD昰产品流程中的最后一步工作,是将原型中的功能.界面具象化描述,是提交给设计(UI ...

  5. OVER(PARTITION BY)函数用法

    OVER(PARTITION BY)函数介绍 开窗函数               Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返 ...

  6. Emacs 之列编辑模式

    // */ // ]]> Emacs 之 列编辑模式 Table of Contents 1. Emacs 下列编辑模式常用命令 2. 可以参考 1 Emacs 下列编辑模式常用命令 先mark ...

  7. How to choose the number of topics/partitions in a Kafka cluster?

    This is a common question asked by many Kafka users. The goal of this post is to explain a few impor ...

  8. java测试时常见的一些错误

    1.解决警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' http://blo ...

  9. SoapUI之webservice接口测试(一)

    1.新建soap project 添加后出现接口内容 2.为了方便后续的测试,以防某些参数删除错了,这边需要新建测试集 3.点开新建的测试集可以发现,里面的内容跟原始测试集内容是一样的 然后就可以在这 ...

  10. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...