如何使块引用响应？

Question

我有以下代码：

.blockquote1 {
  padding: 60px 80px 40px;
  width: 1090px;
  text-align: center;
}

.blockquote1 h7 {
  font-family: "Utopia-italic";
  font-size: 35px;
  font-weight: 700px;
  text-align: center;
}

.blockquote1:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 100;
  content: "\f10d";
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
}

.blockquote1::after {
  content: "";
  top: 20px;
  left: 50%;
  margin-left: center;
  position: absolute;
  border-bottom: 3px solid #0563bb;
  height: 3px;
  width: 200px;
}

blockquote2 cite {
color: #999999;
position: relative;
font-size: 14px;
left: 845px;
bottom: 60px;
margin-top: 5px;
}
 
blockquote2 cite:before {
content: "\2014 \2009";
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
max-width: 100%;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

@media (min-width: 800px) {
  blockquote {
    width: 800px;
  }
}

blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}

<blockquote class="blockquote1">
  <h7>Move in silence, only speak when it’s time to say checkmate.</h7>
</blockquote>
<br />
<blockquote2>
  <cite>Kr. Pankaj Yadav</cite>
</blockquote2>

所以实际的文本是响应式的，就像它在设备宽度改变时改变宽度一样。但是，bockquote2 cite 没有响应，并且在较小的屏幕尺寸上不会改变其位置/宽度。我该如何让它在较小的设备上显示为大文本？

预期输出

这应该是预期的输出，关于如何使它成为可能的任何建议？

Answer 1

问题是如何将引文放在正确的位置 - 在引文下方向右对齐。它不希望整个事情都是响应式的（在改变文本大小等方面，以便引号像在更宽的设备上一样适合一行）。

我的建议是按照预期将 HTML 块引用及其相关的引用元素一起使用（请参阅MDN）。也就是说，引用是（主）块引用的子引用。这也将有助于可访问性。

因此，作为第一次“快速修复”，此 sn-p 更改 HTML 以删除第二个引用，因为语义上没有第二个引用，并将引用文本放置在右侧。它还改变了块引用宽度的设置，因为给定的设置可能使引用在较窄的视口上向右溢出。它将报价的最大宽度保持为 1090px，尽管在问题的代码中。

.blockquote1  {
  box-sizing: border-box;
  padding: 60px 80px 40px;
  max-width: 1090px;
  width: 100%;
  /* make sure it can fit into its container */
  text-align: center;
}

.blockquote1 h7 {
  font-family: "Utopia-italic";
  font-size: 35px;
  font-weight: 700px;
  text-align: center;
}

.blockquote1:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 100;
  content: "\f10d";
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
}

.blockquote1::after {
  content: "";
  top: 20px;
  left: 50%;
  margin-left: center;
  position: absolute;
  border-bottom: 3px solid #0563bb;
  height: 3px;
  width: 200px;
}
blockquote2 {
  rtext-align: right;
  background-color: cyan;
}
.blockquote1 cite {
  color: #999999;
  position: relative;
  font-size: 14px;
  margin-top: 5px;
  text-align: right; /* added */
  width: 100%;
  display: inline-block;
}

.blockquote1 cite:before {
  content: "\2014 \2009";
}

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  max-width: 100%;
  margin: 0.25em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  color: #383838;
}
/* removed as it would cause overflow on narrower devices
@media (min-width: 800px) {
  blockquote {
    width: 800px;
  }
}
*/
blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

blockquote cite:before {
  content: "\2014 \2009";
}

<blockquote class="blockquote1">
  <h7>Move in silence, only speak when it’s time to say checkmate.</h7>
  <br>
  <cite>Kr. Pankaj Yadav</cite>
</blockquote>

Answer 2

1. HTML 标签不正确

blockquote2 和 h7 不是正确的 HTML 标记。 标头标签以h6 结尾，只能使用blockquote。

1. 您可以使用媒体查询

当您在以下代码中选择blockquote 时，您也可以更改其他代码。

@media (max-width: 800px) {
  blockquote {
    width: 800px;
  }
  .blockquote2 {
    font-size: 35px;
  }
}

1. 字体大小错误

您只能使用% px em rem vw ...。只是不要使用宽度。

Answer 3

如果你想要它随屏幕调整大小，你必须使用 % 而不是像素，如果那是你想要的。只需将顶部、底部、左侧和右侧的位置从像素（px）更改为百分比（%）。这应该可以解决问题。

编辑：您还将字体从像素更改为 %

.blockquote1 {
  padding: 60px 80px 40px;
  width: 1090px;
  text-align: center;
}

.blockquote1 h7 {
  font-family: "Utopia-italic";
  font-size: 35px;
  font-weight: 700px;
  text-align: center;
}

.blockquote1:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 100;
  content: "\f10d";
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
}

.blockquote1::after {
  content: "";
  top: 20px;
  left: 50%;
  margin-left: center;
  position: absolute;
  border-bottom: 3px solid #0563bb;
  height: 3px;
  width: 200px;
}

blockquote2 cite {
color: #999999;
position: relative;
font-size: 10%;
left: 845px;
bottom: 60px;
margin-top: 5px;
}
 
blockquote2 cite:before {
content: "\2014 \2009";
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
max-width: 100%;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

@media (min-width: 800px) {
  blockquote {
    width: 800px;
  }
}

blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}