为什么我的lt; h1＆gt;尽管CSS设置了响应迅速，但标签彼此彼此出现？

发布于 2025-02-10 10:04:56 字数 916 浏览 1 评论 0原文

当我在Chrome的DevTools响应式作案中查看其响应能力时，我制作了这个Web应用程序（请参阅照片1），但是当我在手机上打开网站时，＆lt; h1＆gt; gt;当屏幕尺寸缩小时，元素彼此堆叠（请参阅照片2-从我的iPhone 8中获取的屏幕截图）。

该元素的样式设置如下：

h1 {
  font-variant: small-caps;
  font-size: clamp(1rem, 9vw, 4rem);
  padding: 0 1rem;
}

我用Chrome和Safari运行的不同iPhone对其进行了测试。该网站从我的GitHub页面运行，这与故障有关吗？当我检查响应能力时，我的本地版本在计算机浏览器中看起来都不错。

希望有人能在这件事上启发我！

这是照片：

照片1：在Chrome devtools中 - 响应模式

这也是GitHub页面上已发布版本的链接：转到网站

原文

I made this web app which seems to be functioning fine when I check its responsiveness in Chrome's Devtools Responsive modus (see photo 1), but when I open the site on a phone, the words of one of the <h1> elements stack on top of each other when the screen size shrinks (see photo 2 - screenshot taken from my iPhone 8).

The style settings of this element are the following:

h1 {
  font-variant: small-caps;
  font-size: clamp(1rem, 9vw, 4rem);
  padding: 0 1rem;
}

I tested it with different iPhones, both running in Chrome and Safari. The site runs from my GitHub page, does that have anything to do with the malfunctioning? Both my local version as the GitHub version seem fine in my computer browser when I check responsiveness.

Hope someone can enlighten me on this matter!

Here are the photos:

Photo 1: in Chrome DevTools - responsive mode