HTML/CSS 中的媒体查询问题
Media Queries Issue in HTML/CSS
我有以下代码:
//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> Text
</h1>
</div>
<div class="changed"> <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>
基本上,当您 运行 上面的代码时,您会看到两件事:
Text that needs to be executed and centered on smaller devices
Sample Text
需要在更大的设备上执行。
我希望带有签名的 Sample Text
在 更大的设备上完美执行 但 Text that needs to be executed and centered on smaller devices
只需要在 上执行较小的设备,应该居中。我知道这可以使用媒体查询来完成,但我尝试了几种不同的方法但没有用。
预期输出
在最小宽度:320px 和最大宽度:1024px 的设备上(适用于手机和平板电脑),输出应如下所示:
但是,在最小宽度为 1025px 的设备上,输出基本上应该是带有签名动画的 Sample Text
。
注意:我不想要较小设备上的签名动画,只想要上面照片中看到的静态文本。请就如何完成此任务提出任何建议?非常感谢!
我希望这能解决问题:
@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;
}
}
我有以下代码:
//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> Text
</h1>
</div>
<div class="changed"> <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>
基本上,当您 运行 上面的代码时,您会看到两件事:
Text that needs to be executed and centered on smaller devices
Sample Text
需要在更大的设备上执行。
我希望带有签名的 Sample Text
在 更大的设备上完美执行 但 Text that needs to be executed and centered on smaller devices
只需要在 上执行较小的设备,应该居中。我知道这可以使用媒体查询来完成,但我尝试了几种不同的方法但没有用。
预期输出
在最小宽度:320px 和最大宽度:1024px 的设备上(适用于手机和平板电脑),输出应如下所示:
但是,在最小宽度为 1025px 的设备上,输出基本上应该是带有签名动画的 Sample Text
。
注意:我不想要较小设备上的签名动画,只想要上面照片中看到的静态文本。请就如何完成此任务提出任何建议?非常感谢!
我希望这能解决问题:
@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;
}
}