rem
font-size单位类似于em
,只是不是级联而是始终相对于root(html)元素( 更多信息 )。 这具有很好的现代浏览器支持,仅是IE 8,我们需要为其提供px
后备。
不必在各处重复说明,我们可以使用LESS或SASS mixins使其保持干净。 这些mixins假定:
html {
font-size: 62.5%; /* Sets up the Base 10 stuff */
}
.font-size(@sizeValue) {
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
用法
p {
.font-size(13);
}
p {
@include font-size(13);
}
(感谢Gabe Luethje )
卡尔·默克利(Karl Merkli)提出的另一种采用不同方法的SCSS:
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
@mixin rem-fallback($property, $values...) {
$max: length($values);
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$pxValues: #{$pxValues + $value*16}px;
@if $i < $max {
$pxValues: #{$pxValues + " "};
}
}
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$remValues: #{$remValues + $value}rem;
@if $i < $max {
$remValues: #{$remValues + " "};
}
}
#{$property}: $pxValues;
#{$property}: $remValues;
}
因此,您可以执行以下操作:
@include rem-fallback(margin, 10, 20, 30, 40);
并获得:
body {
margin: 160px 320px 480px 640px;
margin: 10rem 20rem 30rem 40rem;
}
翻译自: https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/