如何在没有 :root 的情况下使我的字体大小响应

Question

我有这个简单的博客模板

@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { overflow-x: hidden; font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }

:root {
    --bodyBG: #fff; --bodyColor: #131313;
    --articleBG: #ececec; --articleColor: #303030;
    --selectionBG: #007fc9; --selectionColor: #fff;
    --bQuoteBorder: #333; --bQuoteBG: #d8d8d8;
    --codeBoxBG: #1e1e1e; --codeBoxColor: #fff;
    --codeHeaderBG: #121212; --codeColor: #fff;
    --hrColor: #333;
}

article {
    min-height: 100%;
    max-width: 35em;
    margin: 0 auto;
    padding: 1rem;
    background: var(--articleBG);
    color: var(--articleColor);
    line-height: 1.5;
}

@media (min-width: 50em) { :root { font-size: 22px; } }
p { font-size: 1.1rem;  font-size: calc(100% + .15vw); margin-bottom: .7rem; }
a { color: var(--bodyColor); } a:hover { color: #00aeff; }
h1 { font-size: 2rem;   font-size: calc(100% + 1.2vw); margin-bottom: .2rem; }
h2 { font-size: 1.6rem; font-size: calc(100% + 1vw);   margin-bottom: .2rem; }
h3 { font-size: 1.4rem; font-size: calc(100% + .8vw);  margin-bottom: .2rem; }
h4 { font-size: 1.2rem; font-size: calc(100% + .67vw); margin-bottom: .2rem; }
h5 { font-size: 1rem;   font-size: calc(100% + .5vw);  margin-bottom: .2rem; }
h6 { font-size: .9rem;  font-size: calc(100% + .25vw); margin-bottom: .2rem; }

time, .views { margin-bottom: 0.1rem; font-size: 0.8rem; text-transform: uppercase; }
blockquote { margin: .8rem auto; border-left: 3px solid var(--bQuoteBorder); padding: 10px; background: var(--bQuoteBG); color: var(--bodyColor) }
mark { background-color: #14b5ff; padding: 3px 3px; }
hr { border: 0; margin: 1rem 0; height: 1.5px; background: var(--hrColor); }
p.dropCaps:first-letter {
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(110% + 2.85vw);
    line-height: calc(110% + .2vw);;
}

.txtCenter { text-align: center; }
.txtLeft { text-align: left; }
.txtRight { text-align: right; }

.space { display: block; }
.space.sp5 { padding-top: 5px; }
.space.sp10 { padding-top: 10px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<article>
    <h2 class="txtCenter space sp10">Ivan Zakharov</h2>
    <hr/>

    <h1>Lorem ipsum</h1>
    <time><i class="fas fa-calendar-week"></i> JANUARY 1ST 2019 (3 YEARS AGO)</time><br>

    <p class="dropCaps">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae vehicula leo. Nullam maximus, nulla sed venenatis vulputate, metus ligula vestibulum leo, et volutpat felis velit eu libero. Ut ultricies elit at velit vehicula fermentum. Etiam pellentesque, justo sit amet tempus pellentesque, nulla velit interdum nunc, vitae blandit mauris nunc ac dui. Phasellus a dolor libero. Vestibulum maximus.</p>
    <hr>

    <h1>Lorem ipsum 1</h1>
    <h2>Lorem ipsum 2</h2>
    <h3>Lorem ipsum 3</h3>
    <h4>Lorem ipsum 4</h4>
    <h5>Lorem ipsum 5</h5>
    <h6>Lorem ipsum 6</h6>

    <p>My First letter is Capital!</p>
    <p>This is <b>Bold text</b></p>
    <p>This is <strong>Important text</strong></p>
    <p>This is <i>Italic text</i></p>
    <p>This is <mark>Marked text</mark></p>
    <p>This is <sub>Subscript</sub></p>
    <p>This is <sup>Superscript</sup></p>
    <p>This is <sup>Superscript</sup></p>
    <p>This is <q>natural quote</q></p>
    <p>This is <abbr data-tippy-content="Abbreviation is a short form of a word or phrase" tabindex="0">Abbreviation</abbr>. Try to Hover over it!</p>
    <p><blockquote>This is a Simple BlockQuote</blockquote></p>

</article>

在我的样式文件中，我有这一行 @media (min-width: 50em) { :root { font-size: 22px; } } 当我删除它时字体变得非常小，即使我认为我的样式中有这段代码使我的字体大小响应

p { font-size: 1.1rem;  font-size: calc(100% + .15vw); margin-bottom: .7rem; }
a { color: var(--bodyColor); } a:hover { color: #00aeff; }
h1 { font-size: 2rem;   font-size: calc(100% + 1.2vw); margin-bottom: .2rem; }
h2 { font-size: 1.6rem; font-size: calc(100% + 1vw);   margin-bottom: .2rem; }
h3 { font-size: 1.4rem; font-size: calc(100% + .8vw);  margin-bottom: .2rem; }
h4 { font-size: 1.2rem; font-size: calc(100% + .67vw); margin-bottom: .2rem; }
h5 { font-size: 1rem;   font-size: calc(100% + .5vw);  margin-bottom: .2rem; }
h6 { font-size: .9rem;  font-size: calc(100% + .25vw); margin-bottom: .2rem; }

当我使用这一行时 @media (min-width: 50em) { :root { font-size: 22px; } } 我得到了这个输出

Image1

这就是我删除它时得到的结果

Image2

那么 @media (min-width: 50em) { :root { font-size: 22px; } } 代码究竟做了什么？我如何在不使用 @media (min-width: 50em) { :root { font-size: 22px; } } 的情况下获得相同的输出？？

Answer 1

您所有的字体大小都在 rem 中。根据定义，rem 基于根字体大小。

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

删除 :root font-size 属性会改变...根字体大小。我相信默认值是 16px，但如果我对此有误，有人可以纠正我。所以这就是为什么它看起来小了大约 25%。

要在不使用 :root 的情况下获得相同的效果，您必须使用不同的单位——也许是百分比。百分比字体大小将引用最近的具有固定字体大小的父元素。您可以在 body 元素上定义固定的 22px 字体大小，然后让下面的所有内容都使用百分比。所以 1.1rem 就是 110%。

这是一个基本示例。

div
{
  font-size: 20px;
}

h1
{
  font-size: 400%;
}

<div>
  <h1>Hi</h1>
</div>

Answer 2

响应式字体可以非常容易地制作，没有不必要的代码。为此使用公式：

Image source

这是一个例子：

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: calc(32px + (48 - 32) * ((100vw - 400px) / (800 - 400)));
}

h2 {
  font-size: calc(24px + (32 - 24) * ((100vw - 400px) / (800 - 400)));
}

h3 {
  font-size: calc(19px + (24 - 19) * ((100vw - 400px) / (800 - 400)));
}

h4 {
  font-size: calc(16px + (19 - 16) * ((100vw - 400px) / (800 - 400)));
}

h5 {
  font-size: calc(11px + (16 - 11) * ((100vw - 400px) / (800 - 400)));
}

<body>
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <h3>Header 3</h3>
  <h4>Header 4</h4>
  <h5>Header 5</h5>
</body>

Answer 3

使用clamp()

像这样的东西会响应视口宽度

font-size：钳位（0.75rem，0.875rem + 0.25vw，1rem）；

参考： Linearly Scale font-size with CSS clamp() Based on the Viewport

如何在没有 :root 的情况下使我的字体大小响应

How to make My Font Sizes Responsive without :root

html

css

blogs