Question

我有以下响应字体代码：

@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 */
        }
    }

我不知道如何设置＆＃39;默认大小＆＃39;。例如1.5em字体大小有多少个px？ 14px的？ 12像素？

问候。

Answer 1

由于这是正文字体大小，1.5em应该等于24px。 em 总是使用他的父元素作为基础，但相对的em或 rem 并不使用他的直接父元素;它使用html或body字体大小。 e.g。

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

Answer 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：Bootstrap CSS。

Answer 3

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

e.g。如果您的body有font-size 12px，那么在子元素上设置1em也会使其12px（1em = 100％）

从那时起，您可以使用http://pxtoem.com/等网站来计算您尝试实现的相应em值

你也可以只引用百分数（1.5em = 150%，2em = 200%等等......）

响应式字体与Bootstrap

3 个答案: