css - 带有 Bootstrap 的响应式字体

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

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

问候。

Answer 1

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

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