目前,有了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. android开子线程避免出现main错误

    Runnable SonThread=new Runnable() { @Override public void run() { // TODO Auto-generated method stub ...

  2. 信号量互斥,王明学learn

    信号量互斥 信号量(又名:信号灯)与其他进程间通信方式不大相同,主要用途是保护临界资源(进程互斥).进程可以根据它判定是否能够访问某些共享资源.除了用于访问控制外,还可用于进程同步. 一.信号量分类 ...

  3. Mac系统修改Intellij Idea默认JDK版本

    Intellij IDEA 默认情况下,使用的jdk的版本是1.6,当第一次启动IDEA的时候,如果系统中未安装jdk,则系统会自动到苹果官网下载jdk安装文件.如果你的系统已经安装了jdk1.7或是 ...

  4. dwz中权限的控制

    很多人不明白用dwz要如何在没有登录的时候跳转到登录页面,没有权限的时候弹出提示. 其实,作者在设计的时候,已经完全考虑到了这些需求. 不管是navTab还是dialog,dwz的页面加载最终都是通过 ...

  5. 湖南省第十二届大学生计算机程序设计竞赛 B 有向无环图 拓扑DP

    1804: 有向无环图 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 187  Solved: 80[Submit][Status][Web Board ...

  6. C#实现序列化和反序列化

    从我们面试准备上面,我知道了一个知识点,就是我们vs提供的序列化方法有两个,一个叫二进制序列化,一个叫做xml序列化,下面我们说一下二进制序列化的C#实现: 反序列化: public static T ...

  7. Released Mocked Streams for Apache Kafka

    Kafka Streams is a de­ploy­ment-ag­nos­tic stream pro­cess­ing li­brary writ­ten in Java. Even thoug ...

  8. lr_think_time参数化

    深圳湖北籍软件测试群 275212937

  9. Android Studio 引入Lambda表达式

    依次点击 [File][Other Settings][Default Project Structure]确保当前项目使用的JDK版本是1.8. 打开项目(Project)的build.gradle ...

  10. iOS10 UI教程禁用视图与用户的交互

    iOS10 UI教程禁用视图与用户的交互 在上文中我们提到了使用isHidden属性和alpha属性可以使视图与用户的交互被禁用,除此之外此功能还可以使用UIView的isUserInteractio ...