Get this file…
// See http://snook.ca/archives/html_and_css/font-size-with-rem .baseSize() { font-size:percentage(@baseSize/16); } .remFontSize(@px) { font-size:~`"@{px}px"`; font-size:~`("@{px}"/"@{baseSize}")+"rem"`; } .remWidth(@px) { width:~`"@{px}px"`; width:~`("@{px}"/"@{baseSize}")+"rem"`; } .remHeight(@px) { height:~`"@{px}px"`; height:~`("@{px}"/"@{baseSize}")+"rem"`; } // adjust this size to your liking @baseSize: 16;
…build your own LESS file…
@import "rem-mixin.less"; @baseSize: 10; html { .baseSize(); } body { .remFontSize(12); } h1 { .remFontSize(24); }
…get your CSS file.
html {
font-size: 62.5%;
}
body {
font-size: 12px;
font-size: 1.2rem;
}
h1 {
font-size: 24px;
font-size: 2.4rem;
}