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

Question

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

预期

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

中

如何

1. 使用display:none 或

隐藏div

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

Answer 1

使用媒体查询。

将display:none设置为div，然后使用 max-width 媒体查询为移动设备应用display:block。

Stack Snippet

＆＃13;

＆＃13;

div {
  display: none;
}

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

＆＃13;

<div>Text</div>

＆＃13;

＆＃13;

＆＃13;

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

Stack Snippet

＆＃13;

＆＃13;

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

＆＃13;

<div>Text</div>

＆＃13;

＆＃13;

＆＃13;