rem – Root EM

skalowanie jednostki tekstu względem głównej (root) wartości.

html{font-size: 10px;}
body {font-size: 1.4rem}
h1{width: 2.4rem}

czyli:

body => html font-size * 1.4 = 14px

h1 => html font size * 2.4 = 24px

 

skalowanie:

@media only screen and (min-width: 1024px){
html{font-size: 20px;)
}

czyli:

body => 28px
h1 => 48px

 

Z użyciem LESS:

.width(@sizeValue){
	@remValue: @sizeValue;
	@pxValue: (@sizeValue *10);
	width: ~"@{pxValue}px";
	width: ~"@{remValue}rem";
}

p{
  .width(13);
}

w CSS:

p{
  width: 130px;
  width: 13rem; /* ignorowane w przeglądarkach nie obsługujących remów */
}

mixin wyliczający font w zależności od szerokości ekranu:

w LESS:

.responsiveDesktop(@maxWidth){
	@media only screen and (min-width: ~"@{maxWidth}px"){
		html{
		  @fontSize: ((@maxWidth - 50) * 40 / 1230); //1280-50=1230
		  font-size: ~"@{fontSize}px";
		}
	}
}

w CSS:

.responsiveDesktop(1024){
	@media only screen and (min-width: 1024px;){
		html{
			font-size: 31.67479674796748px
		}
	}
}

—