Question

我需要IE8的REM后备，有大量的mixin通过计算px等效并将其置于REM样式作为后备来解决此问题，但我的REMS被声明为变量的一部分所以我不要以为这可行。

我已经尝试过Chuck Carpenter的polyfill，因为某些原因它不能使用我编译的样式表。

我想到的另一件事是使用带有em的条件样式表而不是IE8的rems，但是每次正常样式表进行任何更改时都需要更新和转换，所以我认为它不是手动可行的。

另一种可能是使用某种条件方法将变量声明为IE8的像素，但我认为LESS不支持这种情况。

这是我的REM声明的地方：

@size-gnt: 4.5rem;               /* 72px /16 */
@size-spr: 3rem;                   /* 48px /16 */
@size-big: 2.25rem;             /* 36px /16 */
@size-lrg: 1.75rem;             /* 28px /16 */
@size-med: 1.25rem;        /* 20px /16 */
@size-nml: 1rem;               /* 16px /16 */
@size-sml: 0.6875rem;    /* 11px /16 */
@size-tny: 0.5rem;            /* 8px  /16 */
@baseline: 1.4375rem;    /* 23px /16 */
@1px:      0.0625rem;         /*  1px /16 */

这是我使用它们时的一个示例：

.spc-pad              {padding: @baseline}

我提到的polyfill： https://github.com/chuckcarpenter/REM-unit-polyfill

Answer 1

对于纯CSS / Less解决方案，我想最紧凑的方法是使用一些＆＃34;基本单元＆＃34;来声明所有这些变量。然后在编译IE8样式表时更改此基本单元（使用任何合适的方法），例如：

@u: 1rem;

@size-gnt: 4.5  * @u;
@size-spr: 3    * @u;
@size-big: 2.25 * @u;
@size-lrg: 1.75 * @u;
// etc.

// then for IE8 just override it with
@u: 16px;

然后，例如，创建IE8样式表的一种方法是仅编译如下文件：

@import "your-main-stylesheet.less";
@u: 16px;

那就是它。

使用LESS变量的IE8 REM回退

1 个答案: