html - 基于用户设备显示文本

Question

我刚刚进入响应式设计，并且对显示内容有疑问。

显然，当用户使用更大的屏幕时，我想显示更多的内容，但我也想根据用户的设备显示某些文本。

例如，我想在桌面上说“拖放文件”，但在手机上我想说“触摸选择文件”。我意识到我可以使用@media 查询并隐藏不适用的文本来做到这一点，但我想知道是否有更好的方法来做到这一点（所以用户不必每次都加载两组文本） .

Answer 1

此代码段是引导 css 框架的一部分，您可以根据用户设备显示/隐藏 DOM 的任何部分，有关更多信息以及如何使用 get to here：

.hidden {
  display: none;
  visibility: hidden;
}
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
.visible-desktop {
  display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

或者您可以使用 jquery 插件（例如responsejs，....），但我建议您使用 CSS @media 查询（引导程序最适合您的意图）。