如何使我的块引用响应不同的屏幕尺寸？

Question

我在页面的 header 中添加了块引号，并试图让它响应，以便文本调整到屏幕大小。我希望文本保持居中，并根据浏览器更改大小。

我试过将字体大小更改为 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>

我希望 blockquote 在浏览器大小更改时调整大小。

Answer 1

只是改变

宽度：565px 到 100% 并添加 max-width: 565px。

容器也是如此 class。 宽度：100% 和 max-width：590px.

如何使我的块引用响应不同的屏幕尺寸？

How do i make my blockquote responsive to different screen sizes?

html

css

html-heading

blockquote

responsive