使用帶有CssResource和@if的GWT的移動設備的不同字體大小

Question

在使用CssResource和ClientBundle的GWT中，可能有如下條件語句：

@if <deferred-binding-property> <space-separated list of values> {
  ... css rules ...
}

在我的項目中，我想為移動設備使用不同的字體大小。 我認為我可以使用以下代碼來實現：

@def fontSize 1.1875em;
@if formfactor mobile {
  @def fontSize 2.375em;
}
.my_font{
    font-family: Arial;
    font-weight: normal;
    font-size: fontSize;
    cursor: default;
}

不幸的是，這對我不起作用。 它始終使用@if語句中定義的字體大小，而不管是什么“ formfactor”（gwt屬性取決於所使用的設備）。 有沒有人可以解釋這一點，或者提出一種更好的方法來實現我的目標？

Answer 1

我相信這是GWT中的Issue 4697 。 當用CSS替換變量時，似乎沒有條件處理被應用。 但是，如果你是一個加fontSize()函數，你CssResource -extending接口，則條件處理應用 （也就是，對於“移動” FORMFACTOR排列，函數的結果是2.375，即使“1.1875em”將在CSS中替換）。

一種解決方法是定義一個“移動”特定於formFactor的變量，並使用條件處理來覆蓋使用fontSize變量的CSS屬性：

@def fontSizeMobile 2.375em;
@if formfactor mobile {
    @def fontSize fontSizeMobile;
} @else {
    @def fontSize 1.1875em;
}
.my_font{
    font-family: Arial;
    font-weight: normal;
    font-size: fontSize;
    cursor: default;
}
@if formfactor mobile {
    .my_font{
        font-size: fontSizeMobile;
    }
}

Answer 2

您是否曾嘗試在if / else中設置def？

@if formfactor mobile {
  @def fontSize 2.375em;
} @else{
  @def fontSize 1.1875em;
}

.my_font{
    font-family: Arial;
    font-weight: normal;
    font-size: fontSize;
    cursor: default;
}