Bootstrap 响应式字体答案

【问题标题】：Responsive font with BootstrapBootstrap 响应式字体
【发布时间】：2014-03-09 08:07:27
【问题描述】：

我有以下响应字体的代码：

@media all and (max-width: 1200px) { /* screen size until 1200px */
    body {
        font-size: 1.5em; /* 1.5x default size */
    }
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
    body {
        font-size: 1.2em; /* 1.2x default size */
        }
    }
@media all and (max-width: 500px) { /* screen size until 500px */
    body {
        font-size: 0.8em; /* 0.8x default size */
        }
    }

我不知道如何设置“默认大小”。例如 1.5em font-size 是多少像素？ 14像素？ 12 像素？。

问候。

【问题讨论】：

标签： css twitter-bootstrap text fonts

【解决方案1】：

因为这是正文字体大小，所以 1.5em 应该等于 24px。 em 总是使用他的父元素作为它的基础，但是相对的 em 或 rem 不使用他的直接父元素；它使用 html 或 body 字体大小。例如

body{
  font-size:1em = 16px
}
.container{
  font-size:1em = 16px
  font-size:0.75em = 12px
}

【讨论】：

【解决方案2】：

这里有一个简单的公式将 px 转换为 em：

Size in em = size in pixels / parent size in pixels

示例：21px / 14px = 1.5em

然后返回：

Size in px = size in EMs * parent size in pixels

示例：1.5em * 14px = 21px

PS：14px 是 Bootstrap 中的默认字体大小。 Source: 引导 CSS。

【讨论】：

【解决方案3】：

em 单元始终使用父元素的单元作为基础。

例如如果您的body 具有font-size 的12px，那么在子元素上设置1em 也会使用12px 渲染它（1em = 100%）

从那时起，您可以使用http://pxtoem.com/ 等网站来计算您想要达到的适当em 值

您也可以只参考百分比（1.5em = 150%、2em = 200% 等等...）

【讨论】：