带有JS和jQuery的响应式文本

Responsive text with JS and jQuery

本文关键字：响应 文本 jQuery JS 带有      更新时间：2023-09-26

我正在尝试在我的网站上设置一个简单的标题，如果窗口缩放或加载到某个px宽度以下，则更改其中的文本以使其更短，然后如果再次缩放，则会再次弹出原始HTML。然而，由于某种原因，这被证明是非常困难的。

现在我有：

<script>
if ( $(window).width() > 480) {    
    $(".title").html("<a class='title' href='/'>LONGTEXTLONGTEXT</a>");
}
</script>
<script>
window.addEventListener('resize', function(event){
    if ( $(window).width() < 480) {    
        $(".title").html("<a class='title' href='/'>SHORTTEXT</a>");
    }
});
</script>

但由于某种原因，它只是失败了。

有什么想法吗？

正如建议的那样，最好不使用 JavaScript 使用 CSS 媒体查询（并且不只是更改字体大小）。

将长标题链接和短标题链接放在页面上，并根据宽度显示/隐藏它们：

div.title { background-color:#ff0; border-bottom:1px solid #000; }
/* this is for anything less than 480px */    
.title > .title { display:none; }
.title > .titlesmall { display:initial; }
/* greater than 480px */
@media screen and (min-width: 480px){
  .title > .title { display:initial; }
  .title > .titlesmall { display:none; }
}
<div class="title">
  <a class='title' href='/'>Some really long title</a>
  <a class='titlesmall' href='/'>CD</a>
</div>

或者修复语法错误，最好也使用 jQuery 来侦听 resize 事件，也应该足够好：

<div class="title">
  <a class='title' href='/'>Some really long title</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  if ($(window).width() < 480) {
    $(".title").html("<a class='title' href='/'>CD</a>");
  }
</script>
<script>
  $(window).on('resize', function(event) {
    if ($(window).width() < 480) {
      $(".title").html("<a class='title' href='/'>CD</a>");
    }
  });
</script>

想

通了。

<script>
 $(document).ready(larg);
 $(window).resize(larg);
 function larg(){
if ( $(window).width() < 480) {    
$(".title").html("<a class='title' href='/'>Smaller Text</a>");
}
else {
$(".title").html("<a class='title' href='/'>Text</a>");
}
}
</script>

将替换加载和调整大小时的文本。

这可以而且应该用CSS来完成。以下是我将如何做到这一点：

/* this is for anything less than 480px */    
.title{ font-size: 1em; }
...
/* greater than 480px */
@media screen and (min-width: 480px){ /*change min-width to em if you prefer*/
    .title{ font-size: 1.25em; }
}

您可以选择所需的任何字体大小。出于好奇，你想用JavaScript做这件事有什么特别的原因吗？

试试字体真棒。这是响应式文本的良好解决方案。

还有

另一种通过CSS实现此目的的方法：

风格：

@media only screen and (min-width: 960px) {
    .title-small {
        display: none;
    }
}
@media only screen and (max-width: 960px) {
    .title-small {
      display: block;
    }
    .title {
      display: none;
    }
}

.HTML：

<h1 class="title">Hello This is a long title.</h1>
<h1 class="title-small">Short title</h1>
相关文章：