Css 获取屏幕宽度并计算最大值

我有下面这样的代码，我想计算和分配

字体大小

/

高度

属性的值。在本例中，我希望根据可用屏幕的最大高度

高度

和计算值设置属性的值（例如

最大高度

）和计算值（假设对

高度

属性进行了类似的计算）。有没有办法用更少的时间做到这一点？我尝试了

max

功能，但似乎不起作用

另外，为了将px/em etc分配给该值，在其中一个线程中提到，可以使用0em+变量值来完成。但是有没有更好看的方法呢？我尝试了下面代码中显示的第二种方法，但它不起作用

这里提到的用例可能听起来很傻，但是实际的用例是不同的，我这样说只是为了简单

.def(@fSize){
  @defHeight: 100px; // Need this to be screen width
  font-size: 0em + @fSize;
  line-height: 0px + (1.5*@fSize); 
  height: 0px + (15*@fSize); // Works fine
  //height: ~"15*@{fSize}px"; // Just prints 15*1px
  max-height: max(@defHeight, @fSize) // doesn't work
}

div#demo{
  .def(1);
}

---

这里有多个问题，所以我会一一回答

是的，您可以使用

window.screen.availWidth

获得可用的屏幕高度，就像在普通JavaScript中一样。当在backticks中提供时，LESS支持Javascript语句

要获得两个值中的最大值，您可以在Less-like

max（@var1，@var2）

中使用内置的

max（）

函数。在本例中，

@var1

和

@var2

是用于比较的两个值。请注意，两者应在同一单位中进行比较。如果没有，它将只输出

max（val1，val2）

作为输出（在您的情况下就是这样）

对于分配单元，这是早期版本LESS的方法之一。现在它有一个名为

unit（）

的内置函数，可以像

unit（@var，px）

一样使用。此函数的工作方式实际上与

~“
15*@{fSize}
px”

几乎相同（请注意引号中的反勾号，这就是第二个height属性不起作用的原因）

总的来说，您的代码可以按如下方式执行：

.def(@fSize){
  @defHeight: `window.screen.availHeight`; //This is for getting screen width
  font-size: unit(@fSize, em); // The following are for assigning the units
  line-height: unit(1.5*@fSize,px);
  height: unit(15*@fSize,px);
  max-height: max(unit(@defHeight,px),unit(15*@fSize,px)) // This is for comparison
}

div#demo{
  .def(1);
}

编译输出：

div#demo {
  font-size: 1em;
  line-height: 1.5px;
  height: 15px;
  max-height: 900px;
}

---

我想你想要达到的就是谈论数字和单位。有一个操作数字单位的功能。但对于这个特定的代码段，使用“算术运算单元传播”可能更为优雅。虽然，在这种特殊情况下，对于可读性更强（语义上）的代码，您应该使用乘法而不是加法，即：

font-size:1em*@fSize，
高度：15px*@fSize等（
@fSize
只是一个刻度，刻度只是算术乘法）。@seven phases max谢谢，将使用这种方法。