将完全响应式排版添加到引导程序 3.这可能吗?看看这里

Question

这是我今天用谷歌搜索了一段时间的问题，除非我遇到这个页面。本博客的作者建议使用一些 LESS mixins 来使用媒体查询使排版元素的大小根据屏幕尺寸而变化。

阅读本文后，我关注了一个关于如何自定义 Bootstrap 3 的博客，以便获得尝试的基础知识，我设法使用 sbt 无插件将所有内容集成到 Play 框架中。

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

• 创建了包含博客代码的响应式排版.less文件

• 修改了我的自定义引导程序文件，包括它，如下所示：

  @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";
  ....
  

结果，我看到无论屏幕大小如何，所有内容都采用我在响应式排版.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 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);

在所有其他内容之后导入此文件。我将其设置为我的自定义引导程序中的最后一个导入。

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

还有一件事：ckuijjer 有一条评论，他指出了图标引用可能存在的问题。我正在使用fontawesome，一切都像魅力一样工作。我还没有尝试过字形。