使用 Twitter Bootstrap 的响应式字体大小答案

【问题标题】：Responsive font-size with Twitter Bootstrap使用 Twitter Bootstrap 的响应式字体大小
【发布时间】：2014-06-29 01:19:38
【问题描述】：

如何使用 Twitter Bootstrap 使字体大小响应？

我编写了一个宽度完全响应但字体不响应的代码。正如您在以下屏幕截图（Android 默认浏览器）中看到的那样，字体大小和文本框也非常小。如何解决这个问题？

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

【问题讨论】：

您是否使用“普通”浏览器尝试过？像 Mozilla 或 chrome
我需要让它在默认浏览器中也能正常工作。
没有办法让某些东西在每个版本的每个浏览器中都能正常工作。你需要忘记一些浏览器，也许你可以尝试使用javascript来调整字体大小，或者尝试使用'em'。
我正在尝试使用 Google Apps Script Web 应用程序来实现它。因此，我认为由于 Caza 消毒，响应部分无法正常工作。
Bootstrap Responsive Text Size的可能重复

标签： twitter-bootstrap responsive-design

【解决方案1】：

我也在我的项目中通过媒体查询解决了这个问题。像这样：

@media (max-width: 991px) {    
    body {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 16px;
    }
}

这种方法对我很有效，但也许还有更聪明的解决方案？！

【讨论】：

【解决方案2】：

你可以像这个例子http://jsbin.com/pupuburu/1那样使用媒体查询

尝试调整窗口大小。

【讨论】：