CSS中的Em单元不'；无法按预期更改字体大小值，为什么？

当屏幕大小小于等于1365px时，我设置

主体{font size:85.33333333 1%；}

以便页眉、主元素和页脚元素的字体大小为16px。当您打开浏览器的开发者工具时，您会看到嵌套在

标题中的
标题
和
div.container
的字体大小确实是16px。。。到目前为止还不错
h1#徽标
嵌套在
div.container
中，具有
字体大小：0.48em
声明。然而，当我在google chrome中检查computed选项卡时，我看到实际的字体大小是9px，但是16px*0.48=7.68px，那么为什么我在那里得到不同的值呢？这个错误破坏了我的整个标题，导致元素没有正确地垂直对齐。谢谢你的帮助


/*概述*/
身体{
保证金：0；
字体：100%“开放式Sans”，无衬线；
颜色：#7f7e7d；
}
页眉、主页眉、页脚{
字体大小：1.171875em；/*18.75px/16px*/
}
h1、h2、h3、h4、p、块报价、图、ol、ul{
保证金：0；
填充：0；
}
主要{
显示：块；
}
氢{
字体大小：3.3333em；/*62.5px/18.75px*/
字体大小：400；
}
h3{
字体大小：1.5557333em；/*29.17px/18.75px*/
保证金：1.1733333em 0；/*22px/18.75px*/
字体大小：400；
}
p{
字体大小：300；
}
a{
颜色：继承；
文字装饰：无；
}
img{
最大宽度：100%；
高度：自动；
边界：0；
}
.集装箱{
最大宽度：960像素；
保证金：0自动；
}
.菜单{
列表样式：无；
}
.菜单>李{
浮动：左；
}
.隐藏{
显示：无；
}
.cf:之前，.cf:之后{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
/*标题*/
标题{
背景：#000；
颜色：#ccc；
字体大小：300；
}
标题.容器{
位置：相对；/*kvoli-jazykovemu菜单，ktore-bude绝对值*/
z指数：1；
}
/*标志*/
#标志{
浮动：左；
字体大小：0.48em；/*9px/18.75px*/
字体大小：继承；
}
#标志a{
显示：块；
文本转换：大写；
}
.logoPic{
显示：内联块；
文本缩进：-9999px；
背景：url（../img/logo/logo.png）不重复左中心；
宽度：148px；/*徽标宽度*/
线高：7.6666667em；/*69px/9px*/
右侧填充：18px；/*priestor pre lomitko*/
位置：相对位置；
}
.logoPic：：之后{
内容：“/”；
位置：绝对位置；
文本缩进：0；
右：3px；
字体大小：40px；/*zostane stale rovnako velke标志，preto fixna velkost pre lomitko*/
颜色：#ffcc00；
}
/*航行*/
导航{
浮动：对；
}
导航a{
显示：块；
}
#导航>李>a{
线高：3.68em；/*69px/18.75px*/
}
#导航>李{
位置：相对位置；
右边距：1.22666666667em；/*23px/18.75px*/
}
#李：最后一个孩子{
右边距：0；
}
#导航>li:悬停：非（.sub）>a{
颜色：bf9900；
}
#导航>li.sub:悬停>a:：之前{
内容：“；
位置：绝对位置；
宽度：60%；
左缘：20%；
保证金权利：20%；
高度：0.26666667em；/*5px/18.75px*/
背景：#ffcc00；
}
#导航>导航子菜单：悬停子菜单{
能见度：可见；
}
/*导航子菜单*/
.子菜单{
位置：绝对位置；
顶部：3.786666667em；/*71px/18.75px*/
左：-1.066666667em；/*20px/18.75px*/
背景：#000；
列表样式类型：无；
可见性：隐藏；
过渡：能见度.15s；
}
.子菜单a{
填充：0.5562666667EM 0.678666666667EM；/*10.43px/18.75px | 12.725px/18.75px*/
}
.子菜单li：悬停{
颜色：bf9900；
}
/*语言*/
#语言{
位置：绝对位置；
右：-9.22666667em；/*173px/18.75px*/
}
#语言a{
显示：内联块；
线高：3.68em；/*69px/18.75px*/
}
#李：以后呢{
内容：“/”；
填充：0.16em；/*3px/18.75px*/
}
#李：最后一个孩子：：之后{
内容：“；
右边填充：0；
}
#语言李：悬停a{
颜色：bf9900；
}
/*媒体查询*/
@介质（最大宽度：1365px）{
身体{
字体大小：85.33333333 1%；
}
}

JS-Bin






















使用vw（视口宽度）它根据窗口大小调整字体大小

  h1 {
      font-size: 5.9vw;
    }
    h2 {
      font-size: 3.0vh;
    }
    p {
      font-size: 2vmin;
    }

em值将与其直接容器（也称为父容器）相关。我想您可能会想使用rem，它总是与
的字体大小或所谓的文档根相关

在这个片段中，em是rem。有两个按钮+/-将修改文档根的字体大小

一小条

$（'in1，'in2'）。on（'click'，函数（e）{
var cur=$（'#hook'）.css（'font-size'）；
var-res；
var mod=$（this.data（'v'）；
res=parseFloat（cur）+parseFloat（mod）；
$（'out1'）.val（res）；
$（'#hook'）.css（'font-size'，res）；
});
/*概述*/
html{
字体大小：16px；
}
身体{
保证金：0；
字体：100%“开放式Sans”，无衬线；
颜色：#7f7e7d；
}
标题，
主要的，
页脚{
字体大小：1.171875rem；
/*18.75px/16px*/
}
h1，
h2，
h3，
h4，
P
块引用，
图形
ol,，
保险商实验室{
保证金：0；
填充：0；
}
主要{
显示：块；
}
h1{
字号：4rem；
}
氢{
字体大小：3.3333REM；
/*62.5px/18.75px*/
字体大小：400；
}
h3{
字体大小：1.5557333333rem；
/*29.17px/18.75px*/
保证金：1.1733333333雷姆0；
/*22px/18.75px*/
字体大小：400；
}
p{
字体大小：300；
}
a{
颜色：继承；
文字装饰：无；
}
img{
最大宽度：100%；
高度：自动；
边界：0；
}
.集装箱{
最大宽度：960像素；
保证金：0自动；
}
.菜单{
列表样式：无；
}
.菜单>李{
浮动：左；
}
.隐藏{
显示：无；
}
.cf：之前，
.cf：之后{
内容