Question

我正在努力让display:none适用于较小的屏幕。但我不能让它正常工作。如果我最小化计算机上的屏幕，那么课程就会消失，但是当我查看手机时却没有。

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

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文件的头部包含视口元标记。它看起来像这样

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

请注意，您可以自定义此标记中的一些选项。

显示：无效。尝试建议的解决方案没有成功

1 个答案: