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％。
要解决填充问题，需要在调整屏幕大小时按比例缩小/放大字体。

想知道如何做到这一点。

请注意如何在“小桌面屏幕”部分中剪切字母，并且周围没有填充。在这种情况下，我希望字母变小，以便在其周围至少填充20px。我希望在“全屏显示”部分中，该字母要大一些，以便其周围的填充大约为20％。

如果可能的话，我希望没有基于此图片中字母宽度的任何硬编码的显式大小（宽度/高度/填充/等），因为我可能会使用不同的字体，因此它应该理想地处理任何字体。如果不可能的话，那么让这个例子起作用是可以的。

如果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>

无论屏幕大小如何，如何居中放置字符并始终在其周围填充

1 个答案: