JS监听屏幕宽度变更并实时更改字体大小

转自www.dongliqingdan.top/2022/12/30/…

注意这里的宽度指的是浏览器的宽度，不是设备的。

代码中的30.72与12.2,，是屏幕宽度除以目标字体大小得出来的除数。

function changeText(){
    var textSize = document.getElementById("video-title");
    let screamWidth = window.innerWidth; 
  //重点，利用原生JS中的 window.innerWidth 获取当前浏览器框架宽度
    let lastWidthA = 0;
    let lastWidthB = 0;
  //监听浏览器大小变化
    window.addEventListener("resize",function(){
        console.log(screamWidth);
        screamWidth = window.innerWidth; 
        if(screamWidth>=780){
            console.log("检测到当前屏幕宽度大于780像素");
            console.log("当前字体大小为："+ textSize.style.fontSize);
            lastWidthA = screamWidth/30.72;
            textSize.style.fontSize = lastWidthA + "px";
        }
        if(screamWidth<780){
            console.log("检测到当前屏幕宽度小于780像素");
            console.log("当前字体大小为："+ textSize.style.fontSize);
            lastWidthB = screamWidth/12.2;
            textSize.style.fontSize = lastWidthB + "px";
        }
    })
}