缩放复杂响应标头

Question

我正在练习一件让我非常害怕的事情:响应CSS。

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

​

​

如果它只是一个简单的h1 (比如只有‘爷爷’)，我会使用font-size: 5vw，它会扩展。然而，由于它更复杂，仅仅抛出vw单元是没有帮助的。

什么是最好的方法，有一个复杂的标题，像这样的比例，在所有屏幕大小？

我的想法：

• 将其设置为SVG或JPG，然后为SEO使用带有display:none的h1或其他一些技巧(例如将其移离屏幕位置:绝对值)。专业的是，使它成为一个图像可能是最简单的方式，让它在任何地方适当地缩放。在我看来，这仍然伤害了SEO.

是否有一种现成的办法来处理这种情况？

Answer 1

您可以使用许多策略，因为它非常固执己见，最好的解决方案是保留文本，对文本的各个部分使用一些span，并使用em单元来调整它们的大小，然后更改父元素上的font-size，各个部分将相应地进行缩放。使用媒体查询@media更改关键断点中父元素的font-size。

​

body {
  margin: 0;
}

.header__title--content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0;
  background-color: red;
  background: url('https://picsum.photos/2000?grayscale');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  font-family: 'Times New Roman', serif;
}

@media screen and (min-width: 400px) {
  .header__title--content {
    font-size: 3em;
  }
}

@media screen and (min-width: 800px) {
  .header__title--content {
    font-size: 4em;
  }
}

@media screen and (min-width: 1000px) {
  .header__title--content {
    font-size: 6em;
  }
}

.header__title {
  display: grid;
  margin-bottom: 0.1em;
}

.header__title--element-one {
  font-size: .75em;
  margin-left: 1.7em;
  line-height: .9em;
}

.header__title--element-two {
  font-size: .5em;
  margin-left: 2.5em;
  line-height: .6em;
}

.header__title--element-three {
  font-size: 1em;
  line-height: .6em;
}

.header__subtitle {
  font-size: .4em;
  text-transform: uppercase;
  line-height: 1em;
}

<hgroup class="header__title--content">
  <h1 class="header__title"><span class="header__title--element-one">Story </span><span class="header__title--element-two">of the </span><span class="header__title--element-three">Grandmaster</span></h1>
  <h2 class="header__subtitle">bobby fisher, the some content goes here</h2>
</hgroup>

​

Answer 2

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

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

@媒体屏幕和(最大宽度:790 px )这意味着对于790 px或更少的屏幕，将字体大小设置为15 px，您可以在这里读到更多关于它的https://www.w3schools.com/css/css_rwd_mediaqueries.asp。