Question

我在页面的标题中添加了一个blockquote，并试图使其具有响应性，以使文本适应屏幕大小。我希望文本保持居中，并根据浏览器更改大小。

我尝试将字体大小更改为vw单位。

.container {
  width: 590px;
  margin: 140px auto;
  position: relative;
}

blockquote {
  width: 565px;
  font: 2.65em CallunaRegular;
  letter-spacing: .075em;
  float: left;
  padding: 45px 0 30px 25px;
  margin: 0;
  border-top: 2px dotted #858585;
  border-bottom: 2px dotted #858585;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
}

.container:before {
  content: "“";
  font-size: 13vw;
  position: absolute;
  left: -100px;
  color: #666;
}

.container:after {
  content: "”";
  font-size: 13vw;
  position: absolute;
  right: -100px;
  top: 150px;
  color: #666;
}

blockquote:first-line {
  font: 1.85em "Sketch Block";
  color: #fff79e;
}

blockquote:first-letter {
  font-size: 2.9em;
  text-transform: uppercase;
  float: left;
  line-height: .52em;
  margin-right: -18px;
  position: relative;
  z-index: 1;
}

blockquote strong:first-child {
  margin-left: 8px;
  letter-spacing: 0;
}

blockquote strong:last-child {
  font: 2em "Museo 700";
  text-transform: uppercase;
  letter-spacing: 0;
}

blockquote em {
  border-bottom: 2px dotted #858585;
}

blockquote+b {
  float: right;
  margin-top: 10px;
  font: 1.6em CallunaRegular;
  letter-spacing: .15em;
}

blockquote+b:first-letter {
  color: #fff79e;
  font-size: 1.3em;
  font-style: italic;
  letter-spacing: .25em;
}

@-moz-document url-prefix() {
  blockquote:first-letter {
    margin-top: -29px;
  }
}

<div>
  <header>
    <article class="container">

      <blockquote>
        <strong>This</strong> Is<em>Just</em> An
        <strong>Example</strong>
      </blockquote>
      <b>Example.</b>
      <a href="#About" class="down-btn">&#8595;</a>
    </article>
  </header>
</div>

我希望在更改浏览器大小时重新调整块引用的大小。

Answer 1

只需更改

宽度：565像素至 100％ 并添加最大宽度：565px 。

容器类也是如此。 宽度：100％和最大宽度：590px 。

如何使我的blockquote响应不同的屏幕尺寸？

1 个答案: