css - 来自 Bootstrap 的魔术字体大小

Question

我开始使用 Bootstrap 创建一个应用程序，最后自定义了 CSS，以至于根本不需要 Bootstrap。但是，在删除 bootstrap CSS 文件时，我遇到了问题。

我有一个元素，我正在分配 120% font-size:

#page-title {
    font-size:120%;
}

现在使用 Bootstrap 3.3.5，字体是一个大小，显然根据 chrome 开发工具计算为 14px。

但是，如果我删除 Bootstrap CSS 并仅将 body 设置为具有 14px 的 font-size(以及各种其他 Bootstrap 样式，例如 line -height)，字体大小不同，但仅适用于 Windows Phone 8.1 IE11。

我的 body CSS 如下:

body{
    margin:0px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

据我所知，这与 Bootstrap 的相同。我还包括所有相同的 meta 标签。唯一的区别是 CSS 文件。

我的问题不是为什么这个特定版本的 IE 会这样做(因为我无法在 Windows 8.1 IE11 上重新创建它)，而是 Bootstrap 的 CSS 有什么魔力可以复制？

Answer 1

我深入挖掘了整个 Bootstrap CSS 并找到了缺失的部分。

@-ms-viewport {
  width: device-width;
}

这修复了 Windows Phone 和平板电脑上的字体大小(以及一些其他调整)，在使用 Bootstrap 时可以正确显示，但并非没有。