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

如果您可以在浏览器为特定大小时更改网站上的文本，那么我正在游荡。将文本更改为浏览器重新调整大小

E.g.文本是“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>

来源

2015-06-20 Stefan Zeuch

谷歌 “CSS媒体查询”。 – Pointy

可以使用媒体查询操作的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: ''; 
    } 
}

来源

2015-06-20 12:23:04

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

来源

2015-06-20 12:15:23 cptstarling

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

您可以使用boostrap做“响应式设计”。无论如何，如果你想以你自己的方式做到这一点，你可以使用导航器的用户代理并做一个小的js函数。

来源

2015-06-20 12:20:24 ndaussy

Screencast

您需要使用Media-queries和两个div会做的好。

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

<div class="title">Welcome to My Site!</div> 
 
<div class="title-small">My Site</div>

来源

2015-06-20 12:20:52

有onResize事件的JavaScript。

您可以使用它像

<body onresize="myFunction()">

处理中myFunctions所有您的需要。需要注意的地方有很多，如果所有的元素都不使用相同的CSS类，则必须调整调整大小的所有元素的大小。

更多关于Resize

来源

2015-06-20 12:21:26

虽然不可取的SEO & UX明智的，它很容易通过Javascript

HTML

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

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

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

来源

2015-06-20 12:22:10 designarti

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

回答

相关问题