Css 缩放复杂响应标头

我正在练习一件让我害怕的事情：响应式CSS

我做了一个这样的标题，主要是通过使用正/负边距。但是，一旦我开始更改视口的尺寸，它就会变得一团糟

如果它只是一个简单的

h1

（例如只有“特级大师”），我会使用

font-size:5vw

，并且它可以缩放。然而，由于它更为复杂，仅仅抛出

vw

单位也无济于事

在所有屏幕尺寸上都有如此复杂的标题的最佳方式是什么

我的想法是：

• 将其设置为SVG或JPG，然后使用

  h1

  和

  display:none

  或其他一些技巧（例如使用position:absolute将其移出屏幕）进行搜索引擎优化。其优点是，将其制作成图像可能是使其在任何地方都能正确缩放的最简单方法。缺点是，就我而言，它仍然伤害SEO

---

有没有一种可行的方法来处理这种情况？

尝试使用css媒体查询，例如：

h1{
 font-size: 30px
 }
@media screen and (max-width: 790px) {
  h1{
   font-size: 15px
  }
}

---

@媒体屏幕和（最大宽度：790px）这意味着对于790px或更小的屏幕，将字体大小设置为15px。您可以在此处阅读更多有关它的信息。

您可以采取许多策略，因为这是一种非常固执己见的策略，最好的解决方案是保留文本，对文本的各个部分使用一些

span

，并使用

em

单位来调整它们的大小，然后只需更改父元素上的

font size

，各个部分将相应地缩放。使用媒体查询

@media

更改关键断点中父元素的

字体大小


正文{
保证金：0；
}
.header\u title--内容{
显示器：flex；
柔性包装：包装；
证明内容：中心；
填充：50px0；
背景色：红色；
背景：url（'https://picsum.photos/2000?grayscale');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
字体系列：“Times New Roman”，衬线；
}
@媒体屏幕和屏幕（最小宽度：400px）{
.header\u title--内容{
字号：3em；
}
}
@媒体屏幕和屏幕（最小宽度：800px）{
.header\u title--内容{
字号：4em；
}
}
@媒体屏幕和屏幕（最小宽度：1000px）{
.header\u title--内容{
字号：6em；
}
}
.标题{
显示：网格；
边缘底部：0.1米；
}
.header\uu title--元素一{
字体大小：.75em；
左边距：1.7em；
线高：.9em；
}
.header\uu title——元素二{
字体大小：.5em；
左边距：2.5em；
线高：.6em；
}
.header\uu title——元素三{
字号：1em；
线高：.6em；
}
.header\uuu副标题{
字体大小：.4em；
文本转换：大写；
线高：1米；
}

大师的故事
鲍比·费舍尔，这里有一些内容
插入您的代码密码。我通过
vw
控制主元素上的字体大小，这样就不需要媒体查询了。壮观的