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

Question

我的网站上的菜单在我的手机和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;
}

Answer 1

CSS没有xx-large作为衡量标准。比它被忽略并回退到默认的浏览器字体大小。通常在网络上它是16px，但在移动设备上它可能更小。

试试这个：

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

IE中不支持

旁注 var()。