Question

我试图像here所描述的那样轻松mixin。

我采用jQuery窗口大小：

@winheight:`$(window).height()`;
@winwidth:`$(window).width()`;

计算一个百分比:(很难赢得某些元素的工作）

.winheight (@percentage){
      @perc: ((@winheight / 100) * @percentage)*1px !important;
 }

.winwidth (@percentage){    
      @perc: ((@winwidth / 100) * @percentage)*1px !important;
 }

通过原生CSS检测方向：

@portrait: ~"screen and (orientation:portrait)";

@landscape: ~"screen and (orientation:landscape)";

然后将其应用于元素：

.main {
   position: relative;
   margin:auto;
   background: gray;
   margin-top: 50px;

@media @portrait {
   .winwidth(50);
   width: @perc;

   .winheight(70);
   height: @perc;
   }    
@media @landscape {
   .winwidth(70);
   width: @perc;

   .winheight(50);
   height: @perc;
   }
}

但只有当我将它们分开时才会返回右@perc（而不是上面的重复，所以高度和宽度将具有相同的值，这不是我想要的）：

@media @portrait {
   .winwidth(70);
   width: @perc;
}
@media @portrait {
   .winheight(50);
   height: @perc;
}   
@media @landscape {
   .winwidth(70);
   width: @perc;
}
@media @landscape {
  .winheight(50);
   height: @perc;
}

是否有更好/其他方式在LESS中返回值？

回报价值较低

0 个答案: