Question

如果您可以在浏览器达到一定规模时更改网站上的文字，我就会徘徊。

E.g。当浏览器在大屏幕上观看时，文字是“Bizweni小学”，但是当在手机，平板电脑或小屏幕上观看时，我希望文本是“Bizweni Primary”

的Stefan

<!-- 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;
   }
}

或者在伪选择器之前使用（只是为了好玩）：

<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: '';
    }
}

Answer 2

Screencast

你需要使用Use Just Data.，两个div会做得很好。

Media-queries

.title-small {
  display: none;
}
@media (max-width: 992px) {
  .title-small {
    display: block;
  }
  .title {
    display: none;
  }
}

Answer 3

最简单的方法是创建两个div，并使用媒体查询显示它们。

Answer 4

您想要更改值显示或值的显示类型？

您可以使用boostrap进行“响应式设计”。在任何情况下，如果您想以自己的方式执行此操作，则可以使用导航器的用户代理并执行小型js功能。

Answer 5

javascript中有<Button x:Name="btnTest" Text="{Binding Title}" Command="{Binding Parent.TestCommand}" CommandParameter="{Binding}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>个事件。

您可以像

一样使用它

onResize

处理myFunctions中的所有需求。有很多要点需要注意，如果所有元素都没有使用相同的css类，你必须在调整大小时调整所有元素字体大小。

更多关于Resize

Answer 6

虽然不建议使用SEO＆amp; UX明智，很容易通过Javascript实现

HTML

<h1 id="heading">Welcome to my site</h1>

JS

if ($(window).width() < 1024) {
    var element = document.getElementById("heading");
    element.innerHTML = "My site";
}

您可以通过CSS隐藏或显示内容，如前所述。这里没有最好的解决方案，我建议保持整个文本不变，并尝试根据屏幕分辨率修改宽度。

将文本更改为浏览器重新调整大小

6 个答案: