js头部设置浏览器字体大小随窗口大小而改变

最新推荐文章于 2026-06-30 11:47:48 发布

原创最新推荐文章于 2026-06-30 11:47:48 发布 · 3.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

27 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用REM单位实现响应式布局的方法，通过JavaScript动态调整根元素字体大小，使页面元素能够根据屏幕宽度自适应变化。

<script>

 /*
 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */

/*
 长宽占位 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>

常用于手机端适配，也可用于pc端适配。

将该段js放在html的文档头部，就可以实现通过改变浏览器窗口大小而改变文字的大小设置。

后期单位全部采用rem。