JS实现REM自动匹配计算FontSize主要涉及以下步骤：
- 在
<head>标签中，添加一个<style>标签，用于设置根元素的默认font-size大小，例如：
<style>
html {
font-size: 16px;
}
</style>
- 在JS中，使用如下代码监听窗口大小的变化，并在变化时重新计算
font-size大小：
window.addEventListener('resize', function () {
var html = document.documentElement;
var width = html.clientWidth;
var fontSize = width / 10;
html.style.fontSize = fontSize + 'px';
});
- 注意，在计算
font-size大小时，将页面宽度除以10，是为了将页面分成10份，每份大小就是1rem，这样方便我们计算和设置其他元素的大小。
下面是两个关于示例说明：
示例一：
假设我们的网页在设计时，宽度为750px。我们计算出每个元素的尺寸时，可以先以750px为基准尺寸，再转换成rem单位。具体代码如下：
/* 假设设计稿上某个元素的宽度为100px */
.element {
width: 1.33rem; /* 100/75，即100px除以设计稿的宽度750px */
height: 2rem; /* 以相同方式计算高度 */
}
示例二：
假设我们要设置一个响应式字体，在不同宽度下字号自适应。我们可以设置不同的font-size值，然后随着页面宽度的变化，切换到相应的font-size大小。具体代码如下：
/* 以750px宽度为基准 */
html {
font-size: 16px;
}
/* 在480px宽度下的字号 */
@media screen and (max-width: 480px) {
/* 此处的font-size值为14px */
html {
font-size: 14px;
}
}
/* 在640px宽度下的字号 */
@media screen and (min-width: 481px) and (max-width: 640px) {
/* 此处的font-size值为15px */
html {
font-size: 15px;
}
}
/* 在750px及以上宽度下的字号，与基准值相同 */
@media screen and (min-width: 641px) {
/* 此处的font-size值为16px */
html {
font-size: 16px;
}
}
以上是JS实现REM自动匹配计算FontSize的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现rem自动匹配计算font-size的示例 - Python技术站
微信扫一扫 
支付宝扫一扫 