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

Question

我有下面的代码我想要计算并为font-size/ heightproperties 分配值.在这里我想max-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()Less like中的内置函数max(@var1, @var2).在这个@var1和@var2两个值进行比较.请注意,它们都应该在同一个单元中进行比较.如果不是,它将仅max(val1, val2)作为输出输出(这是你的情况下发生的事情).
3. 对于分配单元,这是早期版本的LESS的方法之一.现在它有一个内置函数unit(),可以像使用一样使用unit(@var,px).这个函数实际上的工作方式非常相似(注意引号内的反引号,这就是你的第二个高度属性不起作用的原因).~"15*@{fSize}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;
}