垂直节奏使用较少
垂直节奏使用较少
提问于 2014-03-10 07:45:04
最近，我读到了关于垂直节奏的这篇文章，我试图根据这篇文章使用更少的内容来实现，我想知道我这样做是否正确，因为根据数学计算，24 1px字体的线高为1 1px。:D (我从来不太擅长数学)。
.font-size(@target-px-size, @context-px-size: @base-font-size) {
font-size: @toPx;
font-size: @toRem;
.rem(@target-px-size, @context-px-size);
}
.rhythm(@target-px-size) {
.font-size(@target-px-size);
@result: unit((@base-line-height / @target-px-size));
line-height: @result;
margin-top: unit(@result, px);
margin-top: unit(@result, rem);
margin-bottom: unit(@result, px);
margin-bottom: unit(@result, rem);
}
// Rem Calculator
.rem(@target-px-size, @context-px-size: @base-font-size) {
@divide-By: unit(@context-px-size);
@sizeValue: unit(@target-px-size);
@remValue: round(@sizeValue / @divide-By, 1);
@toPx: unit(@sizeValue, px);
@toRem: unit(@remValue, rem);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-20 10:28:06
这似乎很管用。我已经使用这个站点垂直韵律对照不同的值检查了它。
垂直节拍Mixin
.font-size(@target-px-size, @context-px-size: @base-font-size-px) {
.rem(@target-px-size, @context-px-size);
font-size: @toPx;
font-size: @toRem;
}
.rhythm(@target-px-size) {
.font-size(@target-px-size);
@result: unit((@base-line-height-px / @target-px-size));
line-height: @result;
margin-top: unit(@result, px);
margin-top: unit(@result, rem);
margin-bottom: unit(@result, px);
margin-bottom: unit(@result, rem);
}
.rem(@target-px-size; @context-px-size: @base-font-size-px){
@ratio: 1 / @context-px-size;
@result: unit(@target-px-size * @ratio);
@toPx: unit(@target-px-size, px);
@toRem: unit(@result, rem);
}
// Usage
@base-font-size-px: 12px;
@base-line-height-px: 24px;
.bacon {
.rhythm(24);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22294629
复制相关文章
相似问题
腾讯云开发者
