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

Question

我有一个文本（以div为单位），该文本显示在桌面和移动屏幕上。

预期

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

如何

1. 用或隐藏divdisplay:none

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>