css - 显示 :none not working. 尝试了建议的解决方案但没有成功

Question

我正在尝试让 display:none 为较小的屏幕工作。但我无法让它正常工作。如果我将计算机屏幕最小化，类(class)就会消失，但当我查看手机时不会。

我已经尝试过建议的堆栈溢出解决方案，即使用 display:none!important; 覆盖信息类中的 display:block，但是没有也没有用。我也试过从 info 类中取出 display:block 但这没有用。我不认为我可以取出 .tooltip 中的 display:block，因为那样它会弄乱布局。

HTML:

 <div class="container">
     <a href="#" class="info" data-tooltip-text="Header
Content."><img src="info_button.png"></img></a>
</div>

CSS:

 .info {
     display: block;
     position: absolute;
     top: 18px;
     right: 30px;
     text-align: right;
     margin: 0;
     padding: 0;
     cursor: pointer;
     text-decoration: none;
     white-space:pre-wrap;
 }

 .tooltip {
    display: block;
    position: relative;
    left: 0;
    bottom: 120%;
    width: auto;
    padding: 10px;
    background-color: #00DCFF;
    color: White;
    line-height: normal;
    text-transform: none;
    font-size: 16px;
    opacity: 0;
    transform: scaleY(0);
    transition: all 0.2s ease;
    white-space:pre-wrap;
        }

.info:hover .tooltip {
    opacity: 1;
    transform: scaleY(1);
        }

@media screen and (max-width: 768px) {
  .info {
    display: none!important;
    }
  }

Answer 1

您需要在主 html 文件的头部包含 viewport 元标记。看起来像这样

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

请注意，您可以自定义在此标签中看到的一些选项。