如何使用 CSS 仅在移动设备上显示文本？

Question

我有一个文本（在一个 div 中）显示在桌面和移动屏幕上。

期待

我希望文字只显示在

@media only screen and (max-width: 768px)

如何

1. 用

   display:none

   或

隐藏div

2. 还有其他解决方案吗？

Answer 1

使用媒体查询。

将

display:none

设置为div，然后使用

max-width

媒体查询将display:block应用于移动设备。

堆栈片段

div {
  display: none;
}

@media only screen and (max-width: 768px) {
  div {
    display: block;
  }
}

<div>Text</div>

或者您可以使用 min-width 媒体查询。这里的代码更少

堆栈片段

@media only screen and (min-width: 768px) {
  div {
    display: none;
  }
}

<div>Text</div>

Answer 2

它对我不起作用，或者我无法弄清楚。 所以我用这个..

--在 css 文件中：

.hideonphone{ 显示：无；} @媒体唯一屏幕 和（最小设备宽度：320px） 和 (max-device-width : 480px){ .hideonphone{ display: inline;}}

-- 在html页面中：

<div class="hideonphone"> The text goes here</div>

也许是相同的解决方案，但我没有经验。