javascript - 根据视口(viewport)宽度显示不同的内容

<分区>

关闭 8 年前。

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

因此，我想根据视口(viewport)宽度缩短菜单项(即，如果视口(viewport)宽度 <= 768px，则使用“Coaching”而不是“Espace Coaching”。是否可以？是否有用于此的 JS 插件？ (在谷歌上没有找到任何东西)

最佳答案

这是一个非常简单的答案: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

关于javascript - 根据视口(viewport)宽度显示不同的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24477803/

相关文章：

javascript - Highcharts 最小 y 轴值