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

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

Expected

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

How to

1. 隐藏 div 与display:none or

2. 还有其他解决办法吗？

使用媒体查询。

Set 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>