Question

这是我今天用Google搜索了一段时间的问题，除非我遇到this page。本博客的作者建议使用一些LESS mixins来使印刷元素的大小根据使用媒体查询的屏幕大小而变化。

阅读完文章之后，我跟着一篇关于如何customize Bootstrap 3的博客，以便了解基础知识，并尝试使用sbt-less插件将所有内容集成到Play Framework中。

现在，假设我是网络设计师中宇宙中最远的东西 - 我正在努力制作一个网络应用程序只是为了好玩 - 我今天第一次看到一些关于LESS的东西，我跟着自己的直觉如何在bootstrap代码中集成mixins，我尝试了这个：

创建了包含博客

修改了包含它的custom-bootstrap文件，如下所示：

@framework: "lib/bootstrap/less"; // path to Bootstrap's "less" directory

// Core variables and mixins
@import "custom-variables.less";  // my customized variable file
@import "@{framework}/mixins.less";
@import "responsive-typography.less";  // code from the blog

// Reset and dependencies
@import "@{framework}/normalize.less";
@import "@{framework}/print.less";
....

因此，我发现无论屏幕大小如何，所有内容都采用了我在responsive-typography.less文件中设置的最小字体。以下是我从博客中修改文件的方法：

@xxs: ~'min-width: 377px';
@xs:  ~'min-width: @{screen-xs-min}';
@sm:  ~'min-width: @{screen-sm-min}';
@md:  ~'min-width: @{screen-md-min}';


.bs3-responsive-type(@mq, @font-size-base, @mq-size-percentage) {
   @media(@mq) {

     @font-size-large:    ceil((@font-size-base * 1.25)  * @mq-size-percentage);
     @font-size-small:    ceil((@font-size-base * 0.85)  * @mq-size-percentage);
     @font-size-h1:       floor((@font-size-base * 2.6)  * @mq-size-percentage);
     @font-size-h2:       floor((@font-size-base * 2.15) * @mq-size-percentage);
     @font-size-h3:       ceil((@font-size-base * 1.7)   * @mq-size-percentage);
     @font-size-h4:       ceil((@font-size-base * 1.25)  * @mq-size-percentage);
     @font-size-h5:       @font-size-base;
     @font-size-h6:       ceil((@font-size-base * 0.85)  * @mq-size-percentage);
     @import (multiple) "lib/bootstrap/less/scaffolding.less";
     @import (multiple) "lib/bootstrap/less/type.less";
   }
}

.bs3-responsive-type(@sm,  13px, 0.85);  
.bs3-responsive-type(@xs,  12px, 0.8);
.bs3-responsive-type(@xxs, 11px, 0.75); /* Everything takes this font even on large devices */

Answer 1

作为实验，我恢复了最后三行的顺序，一切正常。我得到了一个完全响应的行为。

.bs3-responsive-type(@xxs, 11px, 0.75);  
.bs3-responsive-type(@xs,  12px, 0.8);
.bs3-responsive-type(@sm,  13px, 0.85);

问题是作者在其原始帖子中使用了“max-”变量，我使用了“min-”（正如他在博客中建议的“移动优先”方法）所以我需要恢复这些行。

所以这是一份简短的简历：

responsive-typography.less文件：

/**
 * Responsive typographic mixins
 * http://www.thedotmack.com/tags/Bootstrap,-Responsive,-Typography/
 */

/** Use these settings if you DON'T want a mobile first approach
@xxs: ~'max-width: 377px';
@xs:  ~'max-width: @{screen-xs-max}';
@sm:  ~'max-width: @{screen-sm-max}';
@md:  ~'max-width: @{screen-md-max}';
*/

@xxs: ~'min-width: 80px';
@xs:  ~'min-width: @{screen-xs-min}';
@sm:  ~'min-width: @{screen-sm-min}';
@md:  ~'min-width: @{screen-md-min}';


.bs3-responsive-type(@mq, @font-size-base, @mq-size-percentage) {
    @media(@mq) {

        @font-size-large:    ceil((@font-size-base * 1.25)  * @mq-size-percentage);
        @font-size-small:    ceil((@font-size-base * 0.85)  * @mq-size-percentage);
        @font-size-h1:       floor((@font-size-base * 2.6)  * @mq-size-percentage);
        @font-size-h2:       floor((@font-size-base * 2.15) * @mq-size-percentage);
        @font-size-h3:       ceil((@font-size-base * 1.7)   * @mq-size-percentage);
        @font-size-h4:       ceil((@font-size-base * 1.25)  * @mq-size-percentage);
        @font-size-h5:       @font-size-base;
        @font-size-h6:       ceil((@font-size-base * 0.85)  * @mq-size-percentage);
        @import (multiple) "lib/bootstrap/less/scaffolding.less";
        @import (multiple) "lib/bootstrap/less/type.less";
    }
}

/* IMPORTANT * Revert these lines if you want to switch to 'max-' variables */
.bs3-responsive-type(@xxs, 11px, 0.75);
.bs3-responsive-type(@xs,  12px, 0.8);
.bs3-responsive-type(@sm,  13px, 0.85);
.bs3-responsive-type(@md,  14px, 0.9);

在其他所有内容之后导入此文件。我将它设置为我的custom-bootstrap.less

中的最后一个导入

最后的考虑：原始脚本工作得很好，如果你想使用“min-”值，你需要改变一些事情。所以我建议使用原始脚本，而不是这个版本。

还有一件事：来自ckuijjer的评论中，他说明了图标引用可能存在的问题。我正在使用fontawesome，一切都像一个魅力。我还没有尝试过glyphicons。

为Bootstrap添加完全响应的排版3.这可能吗？看看这里

1 个答案: