Question

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

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

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

Answer 1

此代码段是bootstrap 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查询（bootstrap最适合您的意图）

基于用户设备显示文本

1 个答案: