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

Question

我有如下代码，我想在其中计算和分配 font-size/height 属性的值。在此我想根据可用屏幕的最大值 height 和计算值(让我们假设计算完成对于 height 属性)。有没有办法在 LESS 中做到这一点？我尝试使用 max 函数，但它似乎不起作用。

此外，为了将 px/em 等分配给值，在其中一个线程中提到可以使用 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);
}

Answer 1

问题比较多，一一解答。

1. 是的，您可以像在纯 JavaScript 中使用 window.screen.availWidth 那样获取可用的屏幕高度。 .在 反引号 中提供时，LESS 支持 Javascript 语句。
2. 要获得两个值中的最大值，您可以使用内置的 max()不太像 max(@var1, @var2) 中的函数.在这个@var1和 @var2是用于比较的两个值。请注意，两者应在同一单元以进行比较。如果不是，它只会输出 max(val1, val2)作为输出(这就是您的情况)。
3. 对于分配单位，这是 LESS 早期版本的一种方式。现在它有一个名为 unit() 的内置函数可以像unit(@var,px)一样使用.这个函数实际上与 ~"<code>15*@{fSize}</code>px" 的工作方式几乎相同。 (请注意引号中的反引号，这就是您的第二个高度属性不起作用的原因)。

总的来说，您的代码可以按如下方式完成:

.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;
}