1. 程式人生 > >移動端mixin的px轉rem

移動端mixin的px轉rem

1、多屬性傳遞

@mixin px2rems($pxs){
    @each $key, $value in $pxs{
        #{$key}: $value/$baseFontSize * 1rem;
    }
}

使用例子:

.a{
@include px2rems((font-size: 28,height: 90,line-height: 90,padding-left: 20,padding-right: 20));
}

生成css

.a {
  font-size: 0.37333rem;
  height: 1.2rem;
  line-height: 1.2
rem
; padding-left: 0.26667rem; padding-right: 0.26667rem; }

2、屬性多值傳遞

@mixin remCalc($property, $values...) {
    $max: length($values);
    $remValues: '';
    @for $i from 1 through $max {
        $value: nth($values, $i);
        $remValues: #{$remValues + $value/$baseFontSize}rem;

        @if
$i < $max { $remValues: #{$remValues + " "}; } } #{$property}: $remValues; }

使用例子:

.a{
@include remCalc(padding,10,20);
}

生成css

padding: 0.13333rem 0.26667rem;

注意:文中$baseFontSize為不同設計稿的值,一般750px設計稿為75,即設計稿寬度/10的值