移動端mixin的px轉rem
阿新 • • 發佈:2019-02-11
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的值