从像素转换为 em
Convert from pixels to em
前几天我从 Tutsplus 看了一个关于防弹网页设计的非常好的教程。讲师有一个很棒的功能,是用 Stylus 制作的。
$base_font_size = 16
$base_font_size_ems = unit($base_font_size / 16, em)
$px = unit(1 / $base_font_size, rem)
$px_em = unit(1 / $base_font_size, em)
要在 Stylus 中调用这个很酷的函数,您只需键入:
.button
font-size: 16 * $px
border-radius: 3 * $px solid #000
如果我理解正确的话。该函数让我以像素为单位思考,但以 em 为单位输出所有内容。
现在,我如何在 Less 中执行相同的功能? :-)
从 Stylus 到 Less 的转换相当简单。等效的 Less 代码如下:
@base_font_size: 16;
@base_font_size_ems: unit(@base_font_size / 16, em);
@px: unit(1 / @base_font_size, rem);
@px_em: unit(1 / @base_font_size, em);
.button{
font-size: 16 * @px;
border-radius: 3 * @px solid #000;
}
请注意,以上只是对您的相关代码的直接转换,目前 em
和 rem
始终会产生相同的值。但是 em
和 rem
通常只有在根字体大小和父字体大小相同的情况下才会相同。查看 here 了解有关 em
和 rem
的更多信息。
下面的代码片段是一个修订版本,我们有一个单独的 mixin 来进行 px 到 em/rem 的转换。在这里,我们在变量(全局范围)中设置根字体大小,然后在每个选择器块(本地范围)中设置父字体大小,并将其作为参数传递给 mixin。基于这些,适当输出rem和em值。
@root_font_size: 32;
.rem_em_px_conversion(@parent_font_size: 32){
@px_rem: unit(1 / @root_font_size, rem);
@px_em: unit(1 / @parent_font_size, em);
}
.div{
.rem_em_px_conversion();
font-size: 16 * @px_em; /* change to 16 * @px_rem for converting to rem */
border-radius: 4 * @px_em solid #000;
.button{
@parent_font_size: 16; /* this is same as parent div font size */
.rem_em_px_conversion(@parent_font_size);
font-size: 16 * @px_em;
border-radius: 4 * @px_em solid #000;
}
}
前几天我从 Tutsplus 看了一个关于防弹网页设计的非常好的教程。讲师有一个很棒的功能,是用 Stylus 制作的。
$base_font_size = 16
$base_font_size_ems = unit($base_font_size / 16, em)
$px = unit(1 / $base_font_size, rem)
$px_em = unit(1 / $base_font_size, em)
要在 Stylus 中调用这个很酷的函数,您只需键入:
.button
font-size: 16 * $px
border-radius: 3 * $px solid #000
如果我理解正确的话。该函数让我以像素为单位思考,但以 em 为单位输出所有内容。 现在,我如何在 Less 中执行相同的功能? :-)
从 Stylus 到 Less 的转换相当简单。等效的 Less 代码如下:
@base_font_size: 16;
@base_font_size_ems: unit(@base_font_size / 16, em);
@px: unit(1 / @base_font_size, rem);
@px_em: unit(1 / @base_font_size, em);
.button{
font-size: 16 * @px;
border-radius: 3 * @px solid #000;
}
请注意,以上只是对您的相关代码的直接转换,目前 em
和 rem
始终会产生相同的值。但是 em
和 rem
通常只有在根字体大小和父字体大小相同的情况下才会相同。查看 here 了解有关 em
和 rem
的更多信息。
下面的代码片段是一个修订版本,我们有一个单独的 mixin 来进行 px 到 em/rem 的转换。在这里,我们在变量(全局范围)中设置根字体大小,然后在每个选择器块(本地范围)中设置父字体大小,并将其作为参数传递给 mixin。基于这些,适当输出rem和em值。
@root_font_size: 32;
.rem_em_px_conversion(@parent_font_size: 32){
@px_rem: unit(1 / @root_font_size, rem);
@px_em: unit(1 / @parent_font_size, em);
}
.div{
.rem_em_px_conversion();
font-size: 16 * @px_em; /* change to 16 * @px_rem for converting to rem */
border-radius: 4 * @px_em solid #000;
.button{
@parent_font_size: 16; /* this is same as parent div font size */
.rem_em_px_conversion(@parent_font_size);
font-size: 16 * @px_em;
border-radius: 4 * @px_em solid #000;
}
}