Javascript 如何使角色居中，并且无论屏幕大小，角色周围总是有填充物

我有这些屏幕：

全桌面屏幕

---

桌面小屏幕

---

移动屏幕

---

HTML是这样的：

html，正文{
字体系列：SFMono-Regular、Consolas、releasion-Mono、Menlo、Courier、monospace；
}
* {
保证金：0；
填充：0；
框大小：边框框；
位置：相对位置；
}
正文>部分，正文>标题{
宽度：100vw；
高度：100vh；
高度：计算值（var（--vh，1vh）*100）；
}
标题{
显示器：flex；
弯曲方向：立柱；
}
标题>节{
显示器：flex；
弯曲方向：行；
弹性：1；
}
标题>节>图{
显示器：flex；
弹性：1；
证明内容：中心；
对齐项目：居中；
字体大小：300px；
}
标题>h1{
填充：10px 20px；
字体大小：20px；
背景：黑色；
颜色：白色；
}
标题>部分>侧面{
宽度：300px；
显示器：flex；
背景：红色；
}
@媒体（方向：纵向）{
标题>h1{
顺序：1；
}
标题>节{
顺序：2；
}
标题>节{
弯曲方向：立柱；
}
标题>部分>侧面{
宽度：自动；
高度：100px；
}
}

ð
字母ð

这是我的解决方案， 我使用了

vh

（视口高度）作为字体大小的单位。这将根据屏幕高度调整字体大小

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

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

html，
身体{
字体系列：SFMono-Regular、Consolas、releasion-Mono、Menlo、Courier、monospace；
}
* {
保证金：0；
填充：0；
框大小：边框框；
位置：相对位置；
}
正文>章节，
正文>标题{
宽度：100vw；
高度：100vh；
高度：计算值（var（--vh，1vh）*100）；
}
标题{
显示器：flex；
弯曲方向：立柱；
}
标题>节{
显示器：flex；
弯曲方向：行；
弹性：1；
}
标题>节>图{
显示器：flex；
弹性：1；
证明内容：中心；
对齐项目：居中；
字体大小：75vh；/*可根据您的设计进行更改*/
}
标题>h1{
填充：10px 20px；
字体大小：20px；
背景：黑色；
颜色：白色；
}
标题>部分>侧面{
宽度：300px；
显示器：flex；
背景：红色；
}
@媒体（方向：纵向）{
标题>h1{
顺序：1；
}
标题>节{
顺序：2；
}
标题>节{
弯曲方向：立柱；
}
标题>部分>侧面{
宽度：自动；
高度：100px；
}
}

ð
字母ð

你做到了，耶！非常感谢。添加百分比填充和最小填充如何？@LokasaMawati，我认为如果字体大小调整正确，填充将自动得到修复，即通过在媒体查询中更新字体大小。设置最大字体大小，使其不超过某个大小如何？如

最大字体大小：300px

。啊，我想媒体查询可以做到这一点，但也许有一种更直观/简单的方法，比如使用

calc

。最大字体大小可以通过媒体查询实现，即对于小型设备：50vh/vw，对于中屏幕60vw/vh，对于大屏幕：80vh，vw