CSS单位rem
在W3C规范中是这样描述rem的: font size of the root element.
预处理器转换px单位到rem
sass预处理器
定义一个变量和一个mixin
$baseFontSize: 16;//默认基准font-size
@mixin px2rem($name, $px){
#{$name}: $px / $baseFontSize * 1rem;
}
/使用示例：
.container {
@include px2rem(height, 240);
}
// scss翻译结果：
.container { height: 3.2rem; }
stylus预处理器
$baseFontSize =16; //默认基准font-size
方式一：
rem($px){
return ($px /$baseFontSize)rem;
}
使用示例：
font-size:rem(32px)
stylus翻译结果：
font-size:1rem;
方式二：
px2rem(name, px){
{name}: (px /$baseFontSize)rem;
}
使用示例：
px2rem('margin-top', 6)
stylus翻译结果：
margin-top: 0.375rem;
less预处理器
定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
使用示例：
.container {
.px2rem(height, 240);
}
less翻译结果：
.container {
height: 3.2rem;
}