Question

在从Twitter Bootstrap 2.3.2转换到3.1.1之后，在完成几个迁移指南之后，我发现我的所有字体都太小了（大约是2.3.2大小的75％）。这似乎与屏幕尺寸无关（在同一屏幕上评估，1920x1080）。根据Inspector（Safari和Firefox），旧的和新的应该是相同的字体大小。

由于这对所有字体都是通用的，因此似乎有一些全局缩放正在进行，而Inspector没有透露。那可能是什么？我该如何撤消它？

Web Inspector示例：

BS3版本：

<html>
  <body class="me">
    <div class="jumbotron home-feature">
      <div class="alert alert-info text-center">
        <small>

检查员中的样式：

small: type.less:85: font-size: 85%;
small: normalize.less:159: font-size: 80%; (overridden)
small: User Agent Stylesheet: font-size: smaller;

Inherited from body.me:
.me: me.css: font-size: 1em; (overridden)
body: scaffolding.less:37: font-size: 14px; (overridden)

Inherited from html:
html: scaffolding.less:29: font-size: 62.5% (overridden)

BS2版本：

<html>
  <body class="me">
    <div class="hero-unit home-feature">
      <div class="alert alert-info text-center">
        <small>

样式：

small: bootstrap.css:662: font-size: 85%;
small:  User Agent Stylesheet: font-size: smaller;

Inherited from div.hero-unit.home-feature:
.hero-unit: bootstrap.css:6120: font-size:18px (overridden)

Inherited from body.me:
.me: me.css:1: font-size: 1em; (overridden)
body: bootstrap.css:224: font-size: 14px; (overridden)

Inherited from html:
html: bootstrap.css:68: font-size: 100%; (overridden)

Answer 1

嗯，尽管检查员将其显示为＆＃34;已被覆盖＆＃34; （排除在外），每个造型的最后一行似乎是关键。我添加了

html {
  font-size: 100%; }

到me.css，现在尺寸匹配。

Answer 2

我注意到bootstrap脚手架覆盖了html，因此我将CSS应用于 body 而不是 html

更改前：

html {font-size：24px; }

更改后：

body {font-size：24px; }

使用bootstrap-3.0，所有字体都太小了

2 个答案: