带有 em 的 CSS-Grid 和 font-size 似乎无法响应式工作

Posted 2023-03-06

技术标签:

【中文标题】带有 em 的 CSS-Grid 和 font-size 似乎无法响应式工作【英文标题】：CSS-Grid and font-size with em doesn't seem to work responsively 【发布时间】：2022-01-15 16:53:09 【问题描述】：

我第一次在这个网站上使用网格区域进行布局。为什么网站变小后字体大小没有变化？

例如，我尝试将 em 用于右上角的#benefits 区域，但它似乎没有任何作用。是因为我声明了正文字体大小还是网格不支持它？

@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"   >
                <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>

【问题讨论】：

这样不行，你需要通过媒体查询和响应来处理字体大小！ 【参考方案1】：

那是因为您声明了相对于以下任何一个的字体大小：

<html>

要实现响应式字体大小，您必须在 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);

【讨论】：

非常感谢，我花了好几个小时才完全理解并将其转移到我的案例中，但它完全有效！ :) 您能否进一步详细说明您是如何得出数字 +12 * (100vw - 400px) / 800 的？ 400 必须与从 400px 开始的视口有关，但我不明白这个等式。 @Blue Lovag 之所以存在“12”，是因为在这个例子中，动态计算的字体大小在 2.0625 和 2.8125rem 之间最大增加了 12px。 “* (100vw - 400px) / 800” 是 px-unit 乘以字体大小的最大提升的因子，具体取决于 vw。屏幕宽度：400px => 因子 0px/800 = 0px。屏幕宽度：1200px => 因子 800px/800 = 1px。

以上是关于带有 em 的 CSS-Grid 和 font-size 似乎无法响应式工作的主要内容，如果未能解决你的问题，请参考以下文章

CSS-Grid 而不是 <table> [关闭]

在css-grid中使用align-items时使单元格内容填充整个单元格区域[重复]

你可能不知道的7个CSS单位

在我的 JAVA 代码中使用带有 weka 的 EM 聚类？

使用带有企业模式的 IE11 的 JSF 应用程序

em7028原理