Css 手机上的文字比笔记本电脑上的文字小

我的网站上的菜单在我的手机和Firefox中的响应视图上是不同的。在我的计算机上的响应视图中，视图端口收缩以激活响应设计，字体和其他项目的大小是正确的。在我的手机上，菜单很小

它在我的计算机上的显示是正确的

它在我手机上的样子

我的CSS

#topMenu{
    background: var(--default-background);
    box-sizing: border-box;
    padding: 1rem;
    padding-right: 3vw;
    position: fixed;
    top:0px;
    right:0px;
    left:0px;
    z-index: 20;
    height: var(--top-menu-height);

}
#topMenu #name{
    font-size: xx-large;
}

当视口的宽度小于1200px时，也会运行以下CSS

#topMenu{
    background: rgb(252, 231, 194);
    height: auto;
    padding: 1em;
}
#topMenu #name{
    font-size: xx-large;
}

---

CSS没有

xx大

作为度量。然后它会被忽略并返回默认浏览器字体大小。通常在网络上是16px，但在移动设备上可能更小

试试这个：

#topMenu #name {
    font-size: 16px;
}

---

---

IE中不支持旁注。

是否有视口元标记？另外，您是否可以添加一些HTML并将其转换为示例代码段（以便在编辑文章时提供自己的代码段）？我不再讨论viewport meta标记。添加

解决了问题。很好！我不会把它作为一个答案，它似乎有点。。。愚蠢地把我的评论提升为答案。很高兴它有帮助！xx大字体不作为字体大小存在。我也试过2rem和其他尺寸。