js实现rem自动匹配计算font-size的示例

作者：herman 时间：2023-08-22 11:02:33　

实际开发过程中，我们经常会被各种宽度，高度计算搞晕。尤其是使用了rem的计算方式，自适应布局难倒一大片程序员。为了解决这类问题，我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。

下面是相关JavaScript的实现代码：

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

此代码选640px为基准值，为什么选640呢，

640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候，需要把效果图宽度等比例缩放到640px。

比如当页面中某一div的宽度为60，高度为65的时候，就可以直接这样写样式：

{
width:0.6rem;
height:0.65rem
}

浏览器的兼容性

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。

不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。

完整实例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>响应式布局</title>
<style>
html{font-size: 20px;width: 100％;height: 100％;}
body{margin: 0;padding: 0;}
header,footer{width: 100％;background: #17A578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;}
.footer{position: fixed;bottom: 0;}
.box{}
.public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;}
.left{background: #f00;}
.center{background: #048F74;}
.right{background: #000;}
</style>
</head>
<body>
<header>页面头部</header>
<div class="box">
<div class="public left">左</div>
<div class="public center">中</div>
<div class="public right">右</div>
<div class="public left">左</div>
<div class="public center">中</div>
<div class="public right">右</div>
</div>
<footer class="footer">页面底部</footer>
<script>
//orientationchange方向改变事件
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
})(document, window);
//alert(document.documentElement.clientWidth/320)

</script>
</body>
</html>

来源：https://www.xttblog.com/?p=2318

标签：rem,js,font,size

投稿

js实现rem自动匹配计算font-size的示例

猜你喜欢

sql server 2000阻塞和死锁问题的查看与解决方法

用python对excel查重

Can't connect to MySQL server的解决办法

MySQL索引背后的之使用策略及优化(高性能索引策略)

git版本库创建拓展添加文件到版本库教程

Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解

基于python实现数组格式参数加密计算

Python开发之pip安装及使用方法详解

python中upper是做什么用的

用background 插入flash播放器

Python如何对齐字符串

浅谈MySQL存储引擎选择 InnoDB还是MyISAM

Python学习之MRO方法搜索顺序

使用python编写脚本获取手机当前应用apk的信息

JS鼠标3次点击事件实现代码及扩展思路

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

Python3 Tkinter选择路径功能的实现方法

python函数enumerate,operator和Counter使用技巧实例小结

Golang高性能持久化解决方案BoltDB数据库介绍

详解Vue3如何加载动态菜单