Question

我正在开发一个视图中有实时视频的应用程序，我需要在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

我感觉不舒服，因为我想我可以做一个正确的代码，以便以编程方式执行，正如您所看到的，每50px百分比变化5％，我的应用程序支持的次要高度是750px，因此从750px开始，您在代码中看到的百分比是40％。

如果窗口大小的高度为750px，则高度应为40%，并且在下一个50px之前的百分比相同，因此应显示750px && 800px height } 40%，如果现在的高度为801px，那么新的height应该设置为45%，依此类推......那么，最好的方法是什么？那个？

TLDR

每50px增加5％的高度。

Answer 1

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

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

Answer 2

数学是你的朋友：

var hdiff = windowHeight - 750;

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

Answer 3

您可以通过数学运算轻松完成。

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

每50px对元素赋予不同的高度

3 个答案: