移动布局之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;

}

你可能感兴趣的:(移动布局之rem换算)