使用Twitter Bootstrap响应字体大小

Question

如何使用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>

Answer 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;
    }
}

这种方法对我有用，但也许还有更智能的解决方案？！

Answer 2

您可以使用此示例http://jsbin.com/pupuburu/1

等媒体查询

尝试调整窗口大小。