如何使字符居中并始终在其周围填充无论屏幕尺寸如何

Question

我有这些屏幕：

全桌面屏幕。

小桌面屏幕。

手机屏幕。

HTML是这样的：

html, body {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body > section, body > header {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

header {
  display: flex;
  flex-direction: column;
}

header > section {
  display: flex;
  flex-direction: row;
  flex: 1;
}

header > section > figure {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 300px;
}

header > h1 {
  padding: 10px 20px;
  font-size: 20px;
  background: black;
  color: white;
}

header > section > aside {
  width: 300px;
  display: flex;
  background: red;
}

@media (orientation: portrait) {
  header > h1 {
    order: 1;
  }

  header > section {
    order: 2;
  }

  header > section {
    flex-direction: column;
  }

  header > section > aside {
    width: auto;
    height: 100px;
  }
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <header>
      <section>
        <figure>ð</figure>
        <aside></aside>
      </section>
      <h1>The letter ð</h1>
    </header>
  </body>
</html>

我希望左边的字母符合以下限制条件：

始终在其容器中居中。（这部分正在运行）。
周围总是有一些填充物。我希望内边距至少为 20px，否则为 20% 之类的百分比。
要解决填充问题，字体大小需要随着屏幕大小的调整而缩放 down/up。

想知道我如何才能做到这一点。

注意 "Small Desktop Screen" 部分中的字母是如何被剪裁的，并且周围没有填充。在那种情况下，我希望字母更小，以便它周围至少有 20px 的填充。在 "Full Desktop Screen" 部分，我希望字母稍微大一点，因此周围的填充大约为 20%。

如果可能的话，我希望不要有任何基于这张图片中字母宽度的硬编码显式大小 (widths/heights/paddings/etc.)，因为我可能会使用不同的字体，所以它应该可以理想地处理任何字体。如果不可能，那么让这个示例正常工作就可以了。

如果 CSS 无法实现，那么最好知道，在这种情况下，JavaScript 解决方案听起来不错。但是 CSS 如果可能的话最好 :)

Answer 1

这是我的解决方案，我使用 vh（视口高度）作为字体大小的单位。这将根据屏幕的高度缩放您的字体大小

header>section>figure {
  ...
  ...
  font-size: 75vh; /* Can be changed as per your design */
}

如果你愿意，你也可以尝试使用 vw（视口宽度）单位作为字体大小

html,
body {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body>section,
body>header {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

header {
  display: flex;
  flex-direction: column;
}

header>section {
  display: flex;
  flex-direction: row;
  flex: 1;
}

header>section>figure {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 75vh; /* Can be changed as per your design */
}

header>h1 {
  padding: 10px 20px;
  font-size: 20px;
  background: black;
  color: white;
}

header>section>aside {
  width: 300px;
  display: flex;
  background: red;
}

@media (orientation: portrait) {
  header>h1 {
    order: 1;
  }
  header>section {
    order: 2;
  }
  header>section {
    flex-direction: column;
  }
  header>section>aside {
    width: auto;
    height: 100px;
  }
}

<header>
  <section>
    <figure>ð</figure>
    <aside></aside>
  </section>
  <h1>The letter ð</h1>
</header>

如何使字符居中并始终在其周围填充无论屏幕尺寸如何

How to center character and have there always be padding around it no matter screen size

html

javascript

css

centering