Javascript 每50px为一个元素放置一个不同的高度

我正在开发一个应用程序，其中视图中有一个实时视频，我需要在JavaScript代码中设置CSS部分

我不需要任何类型的解决方案在CSS，请

我在做这样的事情

var playerMsgs =  document.getElementById('player-msgs');

if (windowHeight >= 750 && windowHeight <= 800) {
  playerMsgs.style.height = '40%';
} else if (windowHeight >= 801 && windowWidth >= 850) {
  playerMsgs.style.height = '45%';
} ... // and son 

var playerMsgs=document.getElementById（'player-msgs'）；
如果（窗高>=750&&windowHeight=801&&windowWidth>=850）{
playerMsgs.style.height='45%'；
} ... // 父子

我觉得很不舒服，因为我想我可以通过编程来编写一个合适的代码，正如你所看到的，每个

50px

的百分比变化为5%，我的应用程序支持的次要高度是

750px

，所以从

750px

中可以看到，百分比是40%

如果窗口大小显示的高度为

750px

，则高度应为

40%

，并且在下一个

50px

之前的百分比相同，因此

750px和&800px

应显示

40%

的高度，如果现在的高度为

801px

，则新的

高度应设置为
45%
，依此类推。。。那么，最好的方法是什么

TLDR

每50px增加5%的高度
 可能需要预先进行一些验证，但基本上，公式可以是：

var newHeight = (Math.floor((windowHeight - 750) / 50) * 5 + 40) + '%';
playerMsgs.style.height = newHeight;

可能需要预先进行一些验证，但基本上，公式可以是：

var newHeight = (Math.floor((windowHeight - 750) / 50) * 5 + 40) + '%';
playerMsgs.style.height = newHeight;

数学是你的朋友：

var hdiff = windowHeight - 750;

if (hdiff >= 0)
{
  var pct = Math.floor((hdiff / 10) + 40);
  playerMsgs.style.height = pct + "%";
}

数学是你的朋友：

var hdiff = windowHeight - 750;

if (hdiff >= 0)
{
  var pct = Math.floor((hdiff / 10) + 40);
  playerMsgs.style.height = pct + "%";
}

你可以很容易地用数学运算来完成

var difference = WindowHeight - 750;
var extra = Math.floor(difference/50)
var percent = 40 + extra*5;

你可以很容易地用数学运算来完成

var difference = WindowHeight - 750;
var extra = Math.floor(difference/50)
var percent = 40 + extra*5;