1

I am trying to calculate font size based on ceil() and other. But ceil works first time but fails second time which is next to it after few lines of LESS. I tried with unit() as well. But nothing working easily. Two instances of similar code give different result.

Here is a code I have written again without ceil():

// Mobile First Approach
@font-family-base:      "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-color-base:       #4b4b4b;

@starting-font-size:        0.6em;

@font-size-base:            @starting-font-size;
@line-height-base:          1;
@letter-spacing-base:       -0.05em; 

@font-size-medium:          @font-size-base * 1.25;  //ceil(unit(@font-size-base) * 1.25)
@line-height-medium:        1.2;
@letter-spacing-medium:     0;

@font-size-large:           @font-size-base * 1.50; //ceil(unit(@font-size-base) * 1.50)
@line-height-large:         1.5;
@letter-spacing-large:      0.05em; 

@device-small : 24em;
@device-medium : 46.8em;
@device-large : 50em;


body{
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @font-color-base;
    word-wrap:break-word;

}

@media screen and (max-width:@device-medium) and (min-width: @device-small)
    {
      /* Tablet */
      body {
        font-size:      @font-size-medium;
        line-height:    @line-height-medium;
        letter-spacing: @letter-spacing-medium;
      }
    }
    @media screen and (min-width: @device-large)
    {
      /* Large screen */
      body {
        font:           @font-size-large;
        line-height:    @line-height-large;
        letter-spacing: @letter-spacing-large;
      }
    }

Here is output from LESS2CSS.org. The problem is coming on PrePros App as well on Window. 

@media screen and (min-width: 50em) {
  /* Large screen */
  body {
    font: 0.6em * 1.5;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}

Above Font size is the problem. At other time, the font size comes as "1em" in quote.

How do you calculate font-size based on base font size?

Update:

Just for info to all, This way, calculation is working:

 round((@font-size-base * 1.2), 2);
4

2 回答 2

2

似乎是数学函数的（伪）严格数学问题

显然，数学函数中的一些数学运算需要额外的括号。因此，这两种方法中的任何一种都有效，具体取决于您是否希望这些单位从基本字体中继承。

ceil((unit(@font-size-base) * 1.50)) //eliminates units

ceil((@font-size-base * 1.50)) //keeps units
于 2013-10-31T12:46:30.970 回答
1

我查看了 LESS 来源，似乎 hocus-pocus 是font属性（请注意，在示例中“平板电脑机身”使用font-size和“大屏幕机身”使用font）。无论实际的编译器选项如何，LESS总是解释font值。strict-math: on这也适用于语句中使用的任何函数。font即（带strict-math: off）：

div {
    font:      1.5;              // -> 1.5
    font:      1.5 * 1.5;        // -> 1.5 * 1.5
    font:      round(1.5 * 1.5); // Error, because it is 1.5 * 1.5 "string"
    font-size: 1.5;              // -> 1.5
    font-size: 1.5 * 1.5;        // -> 2.25
    font-size: round(1.5 * 1.5); // -> 2
}

我想这是硬编码在那里作为值的解决方法，font: "Name" 5px/16px ...;并引入了这种类似错误的副作用。

于 2013-11-03T14:00:59.440 回答