移动布局之rem换算

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;

}