浏览器宽度缩小时字体变得太大

Question

我在响应文本大小方面遇到了困难：

<header class="toolbar">
    <h1>TITLE</h1>
</header>

我有

font-size:2.4rem

。字体大小非常适合笔记本电脑浏览器，但在我的手机浏览器上看起来很小。我意识到移动浏览器至少需要

4rem

。因此，为了解决这个问题，我实现了媒体查询：

@media screen and (max-width:1000px) {
            h1 {
                font-size:4.4rem;
            } 
        }

但是当我减小笔记本电脑浏览器的宽度时（<1000px), it works counter-intuitively because font-size increases to 4.4rem & look too big on laptop screen.

我尝试了

viewport

单位 (

font-size: calc(7px+0.5rem)

)，但这也不起作用。

Answer 1

也许这会有所帮助：https://www.w3schools.com/css/css_rwd_viewport.asp

如果不包含此内容，则字体会随着宽度的增加而变大：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果您确实包含它，那么无论宽度如何，字体（大部分）都会保持相同的大小。

因为你还没有包含完整的页面示例，我不知道你是否已经这样做了，所以我至少必须涵盖它。