javascript - 如果屏幕缩小，更改

Question

如果屏幕尺寸缩小，我有一个代码试图更改 h1 的文本，这是我拥有的实际代码，但无法正常工作。有人可以帮助我纠正它并理解它吗？谢谢!

HTML

<h1 id="text1">Test</h1>

JavaScript

if($(window).width() <= 500){
$('#text1').Text('testing');  
}else{
$('#text1').Text('buuu');
}

Answer 1

您需要配合 window 调整大小事件。另一种选择是使用 CSS 伪代码。

@media (min-width: 500px) {
  #text1:after {
    content: "foo";
  }
}
@media (max-width: 499px) {
  #text1:after {
    content: "bar";
  }
}

<h1 id="text1"></h1>

已编辑 根据 Niet the Dark Absol 建议。

@media (min-width: 500px) {
  #text1 > .tiny {
    display: none;
  }
}
@media (max-width: 499px) {
  #text1 > .big {
    display: none;
  }
}

<h1 id="text1">
  <span class="big">Bigger Content</span>
  <span class="tiny">Smaller Content</span>
</h1>