如何仅在 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>