根据视口宽度显示不同的内容

Question

正如您在website上看到的那样，我的水平导航菜单太长了，无法在使用iPad查看页面时与徽标位于同一行。

因此，我想基于视口宽度缩短菜单项（即，如果视口宽度<= 768px，则使用“Coaching”而不是“Espace Coaching”。 可能吗？有这个JS插件吗？ （谷歌上没有找到任何东西）

Answer 1

这是一个非常简单的答案：http://jsfiddle.net/r5Ft9/4/

使用这样的CSS：

@media screen and (min-width: 0px) and (max-width: 799px) {
  .hide-on-small { display: none;}
}

HTML就像这样：

<h1><span class="hide-on-small">Espace </span>Coaching</h1>

此外，以下SO问题包含CSS媒体查询断点的代码段：Common CSS Media Queries Break Points