【心得总结】关于px转em的总结 计算公式///sass--mixin以及function//demo
一、px转em的计算公式
1、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
1、如果元素设置了字体大小，
那么字体大小的转换依旧按下来公式计算，
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
二、px转em的sass----function
html里面不做改动
sass里面style.scss最上面加入function函数：
/*sass pxTOem function start*/
@function strip-units($number){
@return $number / ($number * 0 + 1);
}
$base-font-size: 16px !default;
@function pxToem($target-size,$context:$base-font-size){
@if not unitless($target-size){
$target-size: strip-units($target-size); }
@if not unitless($context){
$context: strip-units($context);
}
@return ($target-size / $context) * 1em;
}
/*sass pxTOem function end*/
调用方法
.header{
font-size:pxToem(40);------------字体相对于父元素
height:pxToem(88,40);------------当前元素设置了字体，则除字体以外的属性都相对于当前字体的大小计算em值
line-height:pxToem(88,40);
color:#793499;
text-align:center;
background:#fff;
}
.time-counting{
height:pxToem(105,16);--------当前元素没有设置字体，则所有属性都相对于父元素的字体计算em值
line-height:pxToem(105,16);
text-align:center;
color:#3b3b3b;
}
三、px转em的sass----mixin
在define.scss文件里面加入这段mixin，
$base-font-size: 16 !default;
@mixin emCalc($props,$sizes,$base:$base-font-size){
$values: ();
$sublists: false;
@each $s in $sizes {
//循环列表中多个属性值，例如text-shadow属性
@if type-of($s) == list {
$sublists: true;
$vv: ();
@each $ss in $s {
$vv: append($vv,if(type-of($ss) == number, #{$ss / $base}em, $ss));
}
$values: append($values,join((), $vv));
}
@else {
$values: append($values,if(type-of($s) == number, #{$s / $base}em, $s));
}
}
$value: join((), $values, if($sublists,comma,space));
@each $prop in $props {#{$prop}: $value}
}
调用mixin
.header{
@include emCalc(font-size, 40);--------------------父元素为body
@include emCalc(height, 88 , 40);------------------当前元素设置字体，则高度相对当前字体大小设置
@include emCalc(line-height, 88 , 40);
color:#793499;
text-align:center;
background:#fff;
}
.time-counting i{
background:#fff;
@include emCalc(font-size, 51 , 26);
@include emCalc(margin, (0,5,0,5), 26);-------------margin四面可以这么写
@include emCalc(padding, (0,10,0,10) , 26);
}
四、px转em的sass----mixin_demo
四、px转em的sass----function_demo
