从像素转换为em
从像素转换为em
提问于 2015-05-10 13:22:49
前几天，我从图斯普鲁斯那里看了一本关于防爆网页设计的很好的教程。教练有一个很棒的功能，是在斯泰勒斯做的。
$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中执行相同的函数？:-)
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-10 13:28:32
从斯泰勒斯到更少的转换是相当直截了当的。相应的减去代码如下：
@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通常是相同的。有关em和rem的更多信息，请查看em。
下面的片段是一个修改后的版本，我们有一个单独的混合器来执行px到em/rem的转换。在这里，我们在变量(全局范围)中设置根字体大小，然后在每个选择器块(本地范围)中设置父字体大小，并将其作为参数传递给混合器。在此基础上，适当地输出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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30151935
复制相关文章
相似问题
腾讯云开发者
