HTML/CSS 中的媒体查询问题

Question

我有以下代码：

//Changing text
(function() {

  var quotes = $(".changed");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    var q = quotes.eq(quoteIndex)
      .fadeIn(2000)
    if (quoteIndex < quotes.length - 1)
      q.delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.changed {
  display: none;
  padding: 0;
}

.changed svg {
  width: auto;
  height: 2em;
}

#signature {
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: sign 6.4s ease;
  animation-fill-mode: forwards;
}

@keyframes sign {
  to {
    stroke-dashoffset: 0;
  }
}

#hero h1 {
  margin: 0;
  display: flex;
  font-size: 64px;
  font-weight: 700;
  height: 1em;
  color: transparent;
  background: black repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id = "hero">

<!-- This is the HTML that should execute only on smaller devices -->
<h1 style="margin-bottom: 16px">Text that needs to be executed and centered on smaller devices</h1>

<!-- This is the HTML that should execute only on larger devices -->
<h1 style="margin-bottom: 16px">Sample
  <div class="changed">
    <h1>&nbsp;Text
    </h1>
  </div>
  <div class="changed">&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>

基本上，当你运行上面的代码时，你会看到两件事：

1. Text that needs to be executed and centered on smaller devices

2. Sample Text 需要在更大的设备上执行。

我希望带有签名的Sample Text 在较大的设备上完美执行，但Text that needs to be executed and centered on smaller devices 只需要在较小的设备上执行并且应该是居中。我知道这可以使用媒体查询来完成，但我尝试了几种不同的方法，但没有奏效。

预期输出

在最小宽度：320 像素和最大宽度：1024 像素（适用于手机和平板电脑）的设备上，输出应如下所示：

---

但是，在 min-width: 1025px 的设备上，输出基本上应该是带有签名动画的Sample Text。

注意：我不想在较小的设备上使用签名动画，只需要上图中的静态文本。请问有什么关于我如何做到这一点的建议吗？非常感谢！

Answer 1

我希望这能解决问题：

@media (min-width: 320px) {
  #hero > h1:nth-of-type(1) {
    display: block;
    text-align: center;
    margin: auto;
  }

 #hero > h1:nth-of-type(2) {
   display: none;
  }
}


@media (min-width: 1024px) {
  #hero > h1:nth-of-type(1) {
    display: none;
  }

  #hero > h1:nth-of-type(2) {
    display: block;
    margin: auto;
  }
 }