javascript - 随着浏览器调整大小更改文本

Question

我在想，当浏览器达到一定大小时，您是否可以更改网站上的文本。

例如在大屏幕上查看浏览器时，文本是“Bizweni 小学”，但在手机、平板电脑或小屏幕上查看时，我希望文本是“Bizweni 小学”

斯特凡

<!-- Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#page-top">Bizweni Primary School</a>
        </div>

        <!-- Navbar Links For Scrolling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#"></a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact Us</a>
                </li>
                <li class="page-scroll">
                    <a href="#">Blog</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您可以使用媒体查询操作 css，所以基本上您可以执行以下操作:

<h1><span class="mobile-hidden">Welcome to </span>My Site</h1>

在 CSS 中

@media all and (max-width: 320px) {
  .mobile-hidden {
    display: none;
  }
}

如果您不想/不能在您的标题中插入 HTML，那么您应该创建两个单独的标签:

<h1>
    <span class="mobile">Title For mobile</span>
    <span class="desktop">Title For desktop</span>
</h1> 

.mobile {
  display: none;
}    

@media all and (max-width: 320px) {
   .mobile {
      display: inline;
   }
   .desktop {
     display: none;
   }
}

或者使用 before 伪选择器(只是为了好玩):

<h1 class="with-before">My Site</h1>

h1.with-before:before {
    content: 'Welcome to ';
}
@media all and (max-width: 320px) {
    h1.with-before:before {
        content: '';
    }
}