【问题标题】:Show text for phones and tablets but not desktops显示手机和平板电脑的文本,但不显示台式机
【发布时间】:2021-04-17 23:20:07
【问题描述】:

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

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

【问题讨论】:

    标签: html css mobile-website


    【解决方案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;
      }
    }
    

    【讨论】:

    • 抱歉没用。它实际上破坏了一些正在工作的东西。我对此很陌生。我花了整个晚上才到达现在的位置。这是页面。 mymammothtech.com/test.html
    • 在桌面上,文字显示为“桌面”,其下方有 2 个图标。电话上的文字显示“移动”,并且有 3 个图标。当我进行更改时,文本很好,但所有图标都显示在两个页面上。我会为你做出改变,让你看看我在说什么。
    • 如果您被不正确的特定元素流血。尝试新的更新代码。一篇很棒的文章:Specificity
    • 我最终使用了app.urlgeni.us,并且使用您的代码一切正常!!!谢谢!!!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-10
    相关资源
    最近更新 更多