Question

我遇到了令我困惑的问题。我有一个tel：link嵌入式。它完全正常，直到我分配一个类或ID（尝试过两者）使用媒体查询在某个屏幕宽度应用{display：none;}。一旦应用了类/ ID，tel：link plain就不能以任何宽度工作。任何帮助都将非常感激。

@media screen and (min-width: 414px){ 
  #call-now{ display: none; } 
}

<div class="pull-left" id="call-now" style="margin-left: 30%; padding-top: 12px">
  <a href="tel:1555444333" style="color: #1b95e0; text-shadow: 1px 1px 1px #ababab; font-family:    'Rubik', sans-serif; font-size: 25px">CALL NOW</a>
</div>

Answer 1

如果设备大于414px，您的CSS表示您不想显示div标签。我想你可能想要使用max-width。另外，只是一个建议：使用id或类而不是内联样式。

所以你会有这样的事情：

CSS：

@media screen and (max-width: 414px){ 
   #call-now{ display: none;
              margin-left: 30%;
              padding-top: 12px; } 
    }
#call-anchor{
  color: #1b95e0;
  text-shadow: 1px 1px 1px #ababab;
  font-family: 'Rubik', sans-serif;
  font-size: 25px;
}

HTML：

<div class="pull-left" id="call-now">
  <a href="tel:1555444333" id="call-anchor">CALL NOW</a>
</div>

媒体查询使tel：link无法正常工作

1 个答案: