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

Question

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

预期

我希望文本仅以@media only screen and (max-width: 768px)显示

如何

1. 使用 display:none 或 隐藏div

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

Answer 1

使用媒体查询。

将display:none设置为div，然后使用最大宽度媒体查询将display:block应用于移动设备。

堆栈代码段

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

<div>Text</div>

或者，您可以使用最小宽度媒体查询。此处的代码更少

堆栈代码段

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

<div>Text</div>

Answer 2

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

.CSS

.hideonphone{ display: none;}
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .hideonphone{ display: inline;}}

.HTML

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

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