CSS-带有 em 的网格和字体大小似乎无法响应

Question

我第一次在本网站中使用网格区域进行布局。为什么网站变小时字体大小没有改变？

例如，我尝试开始在右上角区域使用 em #benefits，但它似乎没有任何作用。是因为我声明了 body font-size 还是网格不支持它？

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

body {
    font-size: 62.5%;
    /* color: white; */
}

* {
    margin: 0;
    padding: 0;
}

main {
    display: grid;
    grid-gap: 1.5rem;
    width: 100%;
    height: 250px;
    grid-template-areas:
        "nav head benefits"
        "nav section news"
        "foot foot foot";
    grid-template-rows: 250px 600px 300px;
    grid-template-columns: 0.5fr 3fr 1fr;
}

#wrapper {
    margin-top: 0;
    max-width: 70%;
    margin: 0 auto;
    /* background-color: black; */
    height: 100vh;
}

main>#main-header {
    grid-area: head;
    background-color: aliceblue;
}

main>#benefits {
    grid-area: benefits;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

main>#main-navigation {
    grid-area: nav;
    background-color: black;
}

main>#main-section {
    grid-area: section;
    background-color: red;
}

main>#main-news {
    grid-area: news;
    background-color: gray;
}

main>#main-footer {
    grid-area: foot;
    background-color: hotpink;
}

header#main-header div {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

header#main-header h1 {
    font-size: 3em;
}

header#main-header p {
    font-size: 1.2em;
    font-weight: 600;
}

aside#benefits h2 {
    font-size: 1.8eem;
}

aside#benefits ol {
    text-align: left;
    list-style: decimal;
    padding-left: 1em;
    font-size: 1.2em;
    font-weight: 600;
}

nav header {
    display: flex;
    flex-direction: column;
    color: white;
    align-items: center;
    justify-content: center;
    height: 250px;
}

nav header h1,
nav header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
}

nav#main-navigation {
    color: white;
    background-color: black;
    display: flex;
    flex-direction: column;
}

nav div {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

ul {
    text-align: center;
    list-style: none;
    font-size: 1.5rem;
}

li {
    margin: 0.5rem 0 0.5rem 0;
}

<!DOCTYPE html>
<html>

<head>
    <title>Willkommen beim Eldur Verlag</title>
    <link rel="stylesheet" href="eldur.css">
</head>

<body>
    <div id="wrapper">
    <main>
        <header id="main-header">
            <div>
                <h1>Willkommen beim Eldur Verlag!</h1>
                <p>
                    Wir sind ein Verlag für düstere Literatur. Horror, Science-Fiction, Fantasy, Thriller.<br>
                    Sehr selten auch mal Humor oder Sachbuch.
                </p>
            </div>
        </header>
        <aside id="benefits">
                <h2>Fünf gute Gründe, direkt bei uns zu bestellen:</h2>
                <ol>
                    <li>Keine Versandkosten innerhalb EU + Schweiz.</li>
                    <li>Vorbesteller von Neuerscheinungen erhalten unsere Titel zum Vorzugspreis und deutlich früher als
                        der
                        Buchhandel.</li>
                    <li>Sie unterstützen Verlag und Autoren, da doppelt so viel Gewinn bei uns hängenbleibt.</li>
                    <li>Kein Newsletter- und Werbespam!</li>
                    <li>Individuelle Kundenbetreuung.</li>
                </ol>
        </aside>
        <nav id="main-navigation">
            <header>
                <h1>Eldur</h1>
                <img src="img/logo/eldur-scifi.png" height="150px" width="150px" alt="">
                <h2>Sci-Fi</h2>
            </header>
            <div>
                <ul>
                    <li>Alle Bücher</li>
                    <li>Horror</li>
                    <li>SCI-Fi</li>
                    <li>Fantasy</li>
                    <li>Thriller</li>
                    <li>Allgemein</li>
                    <li>Antiquariat</li>
                </ul>
                <ul>
                    <li>Wir über uns</li>
                    <li>Unsere Autoren</li>
                    <li>Sie sind Autor?</li>
                    <li>Downloads</li>
                    <li>Blog</li>
                    <li>News</li>
                </ul>
            </div>
        </nav>
        <section id="main-section"></section>
        <aside id="main-news"></aside>
        <footer id="main-footer"></footer>
    </main>
    </div>
</body>

</html>

Answer 1

那是因为你声明了你的字体大小：

<html>-元素的字体大小 <= rem,
每个元素的当前字体大小（从其父元素继承到根元素甚至浏览器字体大小）<= em.

要实现响应式字体大小，您必须在 font-size 规则中使用 viewport percentage lengths，例如 vw 或 vh。

下面是一个使用 vw 和 clamp() 的响应式示例。在 400px 和 1200px 视口宽度之间，它使字体大小相对于视口宽度从 2.0625rem 动态增长到 2.8125rem。忽略看起来奇怪的 rem 值并查看其中的 vw，执行响应式“魔术”：

h1 {
  font-size: clamp(2.0625rem, 2.0625rem + 12 * (100vw - 400px) / 800, 2.8125rem);
}

CSS-带有 em 的网格和字体大小似乎无法响应

CSS-Grid and font-size with em doesn't seem to work responsively

html

css

font-size

responsive-design

css-grid