JavaScript实现响应式文本大小：避免CSS样式被覆盖的方案咨询

需求：实现文本大小随窗口宽度动态响应的效果。

当前使用的代码如下：

JavaScript代码 #

flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
    for(var y = 0; y < divs.length; y++) {
        var relLineHeight = divs[y].offsetWidth*0.1;
        divs[y].style.lineHeight = relLineHeight+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};

CSS代码 #

.text-content-title{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    padding-bottom:20px;
  }
  
  .text-content{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1em; 
    font-weight: 400;
    line-height: 1.6em;
    padding:5px 0;
    color: #000;
/*     width:70vw; */
    padding: 20px 0;
  }

.text-container{
  width:35vw;
}

HTML代码 #

<div class="text-container">
        <h2 class="text-content-title flexFont flexLineHeight">Language Skills</h2>
        <p class="text-content flexFont flexLineHeight" id="myDIV">I have always been fascinated by different cultures, habits, mindsets, and the interaction and diversity of people with different backgrounds.
I firmly believe the best way to learn about another culture is to start to learn their language.

I am also convinced if you get in contact with people in the language they know the best that not only shows your interest but will make the communication smooth and comfortable.
        </p>
      </div>

遇到的问题：当前代码会覆盖CSS中设置的字体大小与行高，导致文本显示效果与预期偏差较大。咨询：是否需要为不同文本元素设置不同变量，或是存在其他未注意到的问题？

为什么会覆盖CSS样式？ #

因为JS里直接给元素设置了style.fontSize和style.lineHeight，这属于内联样式，优先级远高于CSS类里定义的样式，所以会直接覆盖你原本写的CSS值。

具体解决办法 #

1. 给不同元素设置差异化的缩放系数

标题和正文原本的字号、行高有固定比例（比如标题字号是正文的1.8倍），但你现在用了统一的0.05和0.1系数，直接破坏了这个比例。可以通过判断元素类名来应用不同的计算逻辑：

function flexFont() {
    const elements = document.getElementsByClassName("flexFont");
    for (let el of elements) {
        let fontSizeCoeff = 0.05;
        let lineHeightCoeff = 0.1;
        
        // 根据元素类名调整系数，保留原本的样式比例
        if (el.classList.contains('text-content-title')) {
            fontSizeCoeff = 0.08;
            lineHeightCoeff = 0.12;
        } else if (el.classList.contains('text-content')) {
            fontSizeCoeff = 0.045;
            lineHeightCoeff = 0.09;
        }
        
        const relFontSize = el.offsetWidth * fontSizeCoeff;
        el.style.fontSize = `${relFontSize}px`;
        
        const relLineHeight = el.offsetWidth * lineHeightCoeff;
        el.style.lineHeight = `${relLineHeight}px`;
    }
}

window.onload = flexFont;
window.onresize = flexFont;

2. 基于原始CSS样式动态缩放

如果你不想硬写系数，可以先获取元素原本的CSS值，再按比例动态调整，这样能完全保留你一开始设定的样式比例：

function flexFont() {
    const elements = document.getElementsByClassName("flexFont");
    // 以容器宽度为基准设定缩放比例
    const containerWidth = document.querySelector('.text-container').offsetWidth;
    const baseWidth = 500; // 假设500px是你设计时的基准宽度
    const scaleFactor = containerWidth / baseWidth;

    for (let el of elements) {
        const computedStyle = getComputedStyle(el);
        // 基于原始字号计算新字号
        const originalFontSize = parseFloat(computedStyle.fontSize);
        el.style.fontSize = `${originalFontSize * scaleFactor}px`;
        // 基于原始行高计算新行高
        const originalLineHeight = parseFloat(computedStyle.lineHeight);
        el.style.lineHeight = `${originalLineHeight * scaleFactor}px`;
    }
}

3. 用CSS替代JS（更推荐）

其实完全不需要JS就能实现响应式字号，用vw单位或者clamp()函数更简单，还不会出现样式覆盖的问题：
修改后的CSS：

.text-content-title{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    /* 最小1.2em，最大1.8em，中间随视窗宽度平滑变化 */
    font-size: clamp(1.2em, 4vw, 1.8em);
    padding-bottom:20px;
    line-height: clamp(1.5em, 5vw, 2em);
  }
  
  .text-content{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: clamp(0.8em, 2vw, 1em);
    font-weight: 400;
    line-height: clamp(1.2em, 3vw, 1.6em);
    padding:5px 0;
    color: #000;
    padding: 20px 0;
  }

.text-container{
  width:35vw;
}

这种方式不需要任何JS代码，CSS原生就能实现随窗口宽度动态调整，还能严格保留你原本设定的样式比例。

额外优化点 #

• 你原本的JS循环了两次divs数组，完全可以合并成一次循环，减少不必要的DOM操作。
• 建议用let/const替代var，避免变量提升带来的潜在问题。

内容的提问来源于stack exchange，提问作者istvan weisz