Javascript 函数在调整窗口大小时写入新的文本大小

我正试图为我遇到的一个小问题找出一个方程式。我不擅长计算这些类型的事情，但我知道我以前用过一组不同的数字

基本上，我想弄清楚：

  if 360px = 100%;
 and 959px = 160%;
then 720px = X;

720px是一个任意数。我知道360px应该是100%的字体大小，而959px应该是160%的字体大小。我想在屏幕放大或缩小时（通常是加载时）更改正文字体大小，并且我想找出介于两者之间的任何字体大小百分比

我想将其插入到javascript数学函数中，实现如下功能：

function widthToPerc(){
    var width = $(window).width();
    var toPerc = // THIS FORMULA RIGHT HERE TO GET A PERCENTAGE
    $('body').css({"font-size" : toPerc + "%"});
}

---

然后在加载窗口和调整窗口大小时启动此操作。

如果您的方程是线性的，则应为以下解决方案：

f(x) = a*x + b

---

---

解决这个问题，你会得到

a~=0.1

和

b~=63.94

因此，结果是：

var ToPerc = width * 0.1 + 63.94; // 99.94% for 360px; 159.84% for 959px

---

如果您需要更高精度的小数求解，如果您的方程是线性的，则应采用以下解决方案：

f(x) = a*x + b

function calculate(w){
   //Assuming the numbers you provided and w coming without px

    var d = 959-360;
    var p = 160-100;

    var c = w - 360;

    var cp = p*c/d + 100
    return cp
}

---

---

解决这个问题，你会得到

a~=0.1

和

b~=63.94

因此，结果是：

var ToPerc = width * 0.1 + 63.94; // 99.94% for 360px; 159.84% for 959px

---

如果您需要更高精度的求解和更多的小数

OnLoad，您将获得初始$（window）.width（）。您将把它存储在一个全局变量中，正如我从最开始所说的那样

function calculate(w){
   //Assuming the numbers you provided and w coming without px

    var d = 959-360;
    var p = 160-100;

    var c = w - 360;

    var cp = p*c/d + 100
    return cp
}

var initWidth = $(window).width();

然后函数：

function widthToPerc(){

    var width = $(window).width();
    var diff = width - initWidth;

    var toPerc;

    if(diff > 0){ //window is bigger after resizing

        toPerc = Math.floor((diff / initWidth) * 100) + 100;

    }
    else{ //window is smaller after resizing

        diff = Math.abs(diff);

        toPerc = Math.abs(Math.floor((diff / initWidth) * 100) - 100);

    }

    $('body').css({"font-size" : toPerc + "%"});

}

---

假设初始宽度为600，用户调整浏览器大小使其更大。现在宽度是800

因此：

---

现在让我们看看什么时候窗口被调整了大小，变小了

var initWidth = 600;
var width = 400;
var diff = -200;      // 400 - 600

diff < 0    // true 

diff = 200      //after Math.abs

toPerc = 0.3    // 200 / 600
toPerc = 30     // after *100 and rounded down
toPerc = -70    // 30 - 100
toPerc = 70     // after Math.abs

//the window is a 30% smaller than it was intially

$('body').css({"font-size" : "70%"}); 

var initWidth=600；
var宽度=400；
变量差异=-200；//400 - 600
差异<0//true
diff=200//Math.abs之后
toPerc=0.3//200/600
toPerc=30//在*100之后向下舍入
toPerc=-70//30-100
toPerc=70//Math.abs之后
//窗口比最初小了30%
$（'body'）.css（{“字体大小”：“70%”）；

OnLoad您将获得初始$（window）.width（）。您将把它存储在一个全局变量中，正如我从最开始所说的那样

var initWidth = $(window).width();

然后函数：

function widthToPerc(){

    var width = $(window).width();
    var diff = width - initWidth;

    var toPerc;

    if(diff > 0){ //window is bigger after resizing

        toPerc = Math.floor((diff / initWidth) * 100) + 100;

    }
    else{ //window is smaller after resizing

        diff = Math.abs(diff);

        toPerc = Math.abs(Math.floor((diff / initWidth) * 100) - 100);

    }

    $('body').css({"font-size" : toPerc + "%"});

}

---

假设初始宽度为600，用户调整浏览器大小使其更大。现在宽度是800

因此：

---

现在让我们看看什么时候窗口被调整了大小，变小了

var initWidth = 600;
var width = 400;
var diff = -200;      // 400 - 600

diff < 0    // true 

diff = 200      //after Math.abs

toPerc = 0.3    // 200 / 600
toPerc = 30     // after *100 and rounded down
toPerc = -70    // 30 - 100
toPerc = 70     // after Math.abs

//the window is a 30% smaller than it was intially

$('body').css({"font-size" : "70%"}); 

var initWidth=600；
var宽度=400；
变量差异=-200；//400 - 600
差异<0//true
diff=200//Math.abs之后
toPerc=0.3//200/600
toPerc=30//在*100之后向下舍入
toPerc=-70//30-100
toPerc=70//Math.abs之后
//窗口比最初小了30%
$（'body'）.css（{“字体大小”：“70%”）；

我不确定这是否是你的意思，但我是这样理解的

这对我来说更像是一个数学问题，所以让我们将像素和百分比转换为点：

p1 = (360,100)
p2 = (959,160)
p3 = (720,y3)

现在我们发现以百分比表示的是

720

介于

360

和

959

之间：

(720-360)/(959-360) = around 60%

要获得

y3

，我们将执行以下操作：

((160-100)*.60)+100 = 136

---

对于介于

360

和

959

function widthToPerc(){
    var width = $(window).width();
    var toPerc;
    var minX = 360;
    var maxX = 959;
    var minY = 100;
    var maxY = 160;
    if (width >= 360) {
      toPerc = min;
    }
    else if (width <= 959) {
      toPerc = max;
    }
    else {
      toPerc = ((maxY-minY)*((width-minX)/(maxX-minX)))+minY;
    }
    $('body').css({"font-size" : toPerc + "%"});
}

函数宽度toperc（）{
变量宽度=$（窗口）.width（）；
var-toPerc；
var-minX=360；
var maxX=959；
var minY=100；
var-maxY=160；
如果（宽度>=360）{
toPerc=min；
}
否则如果（宽度我不确定这是否是你的意思，但我是这样理解的

这对我来说更像是一个数学问题，所以让我们将像素和百分比转换为点：

p1 = (360,100)
p2 = (959,160)
p3 = (720,y3)

现在我们发现以百分比表示的是
720
介于
360
和
959
之间：

(720-360)/(959-360) = around 60%

要获得
y3
，我们将执行以下操作：

((160-100)*.60)+100 = 136


对于介于
360
和
959

function widthToPerc(){
    var width = $(window).width();
    var toPerc;
    var minX = 360;
    var maxX = 959;
    var minY = 100;
    var maxY = 160;
    if (width >= 360) {
      toPerc = min;
    }
    else if (width <= 959) {
      toPerc = max;
    }
    else {
      toPerc = ((maxY-minY)*((width-minX)/(maxX-minX)))+minY;
    }
    $('body').css({"font-size" : toPerc + "%"});
}

函数宽度toperc（）{
变量宽度=$（窗口）.width（）；
var-toPerc；
var-minX=360；
var maxX=959；
var minY=100；
var-maxY=160；
如果（宽度>=360）{
toPerc=min；
}
否则如果（width不仅仅是几个if语句或switch语句？你的意思是你只想在widthToPercent函数中实现该算法？@Huangism好吧，720px只是一个例子，我想知道其中每个数字的百分比between@inoabrian差不多，是的。我想通过正文字体大小百分比A来确定正文大小Ge你能再详细说明一下它的用法吗？不仅仅是几个if语句还是一个switch语句？你的意思是你只想在widthToPercent函数中实现该算法？@Huangism好吧，720px只是一个例子，我想知道每个数字在between@inoabrian差不多，是的。我想要体型通过body font size Percentage显示的文本您能再详细说明一下使用方法吗？我已经插入了这个，您只是有一个小错误，我可以修复并使用它：您只需要将100添加到
cp
var cp=p*c/d+100
，它工作得非常好，精确到小数点。一旦您编辑了这个，我将接受您的回答我插入了这个，但有一个小错误，我可以修复并使用它：你只需要将100添加到
cp
var cp=p*c/d+100
，它工作得很好，一直到小数点。一旦你编辑了它，我会接受答案这是一个很好的方法，我非常感谢使用我想要使用的变量。我已经我同意塞尔吉奥的答案，主要是因为我可以用脚本中的数字来微调它们，以达到设计的目的，还有一点是因为他的数字是一个完美的整数。这是一个很好的方法，我非常喜欢使用我想用的变量。我同意塞尔吉奥的答案，主要是因为我可以用sc中的数字我想根据设计的眼光对它们进行微调，也因为他的数字是完美的整数。