Question

最近，我已经阅读了关于垂直节奏的this article，我正在尝试使用较少的文章进行实施，我想知道我是否以正确的方式进行实施，因为基于数学如果我的数学，那么24px字体的行高将为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);
}

Answer 1

这似乎有效。我已使用此网站Vertical rhythm

针对不同的值对其进行了检查

Vertical Rhythm 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);
}

垂直节奏使用较少

1 个答案: