显示手机和平板电脑的文本，但不显示台式机

Question

我可以在手机上使用它，但桌面文本显示在平板电脑上。

@media all and (min-width: 768px) {
  .mobile {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .desktop {
    display: none !important;
  }
}

<h1 class="desktop">Desktop</h1>
<h1 class="mobile">Mobile</h1>

Answer 1

767px 实际上是平板电脑的最小宽度。

您可能正在 Ipad 上进行测试。设置为 1024px 是最安全的。

因为通常平板电脑是从 768 到 1024。

我建议：

#header nav li.mobile {
    display: none;
}

@media all and (max-width: 1023px) {
  #header nav li.mobile {
    display: inline-block;
  }
}

@media all and (max-width: 1023px) {
  #header nav li.desktop {
    display: none;
  }
}