less 변수를 사용하는 IE8 REM 대체

Question

IE8의 경우 REM 대체가 필요합니다.이 문제를 해결하기 위해 px를 계산하고 대체 방식으로 REM 스타일 위에 두는 방식으로이 문제를 해결합니다. 그러나 REMS는 부분적으로 선언됩니다 변수의 및 그래서 나는 이것이 작동 할 수 있다고 생각하지 않습니다.

나는 Chuck Carpenter의 polyfill을 시험해 보았습니다. 어떤 이유로 컴파일 된 스타일 시트에서 작동하지 않습니다.

내가 생각했던 또 다른 한가지는 IE8 용 rems 대신에 em이있는 조건부 스타일 시트를 사용하는 것이지만 이것은 일반적인 스타일 시트에 변경 사항이있을 때마다 업데이트하고 변환해야하므로 수동으로 실행할 수 있다고 생각하지 않습니다. .

또 다른 종류의 조건부 메서드를 사용하여 IE8 용 픽셀로 변수를 선언 할 수 있지만 이것이 덜 지원된다고는 ​​생각하지 않습니다.

.spc-pad    {padding: @baseline} 

polyfill 내가 언급 : https://github.com/chuckcarpenter/REM-unit-polyfill

@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 */ 

이것은 내가 그들을 사용하는 경우의 예입니다 : 여기

내의 REM이 선언되고있는 곳이다

Answer 1

순수 CSS/Less 솔루션의 경우 가장 간단한 방법은 "기본 단위"를 사용하여 모든 변수를 선언 한 다음 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; 

그것 뿐이다

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

:

그리고 예를 들어 하나의 방법 은 IE8 스타일 시트는 같은 파일을 컴파일 될 것이라고 만들 수 있습니다.