Question

我有以下一些代码可以将我在手机上的徽标更改为点击通话图像，否则在所有其他尺寸上它只是一个没有点击通话功能的常规徽标。但是，我似乎无法让它实际点击呼叫。它确实会更改移动设备上的徽标，但不会点击通话。单击它时它什么都不做。我在这里做错了什么？

<div class="container">
  <div class="row">

    <div class="col-xs-12 hidden-sm hidden-md hidden-lg" align="center">
      <a href="tel:8003220503">
        <img src="../mobile/Acrictc.png" class="btn-responsive" style="width:100%" alt="Image"></a>
      <!--Mobile     <img src="../mobile/Acrictc.png" class="img-responsive"alt="image" /> -->
    </div>

    <div class="hidden-xs col-sm-12 hidden-md hidden-lg" align="center">
      <img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
      <!--Tab-->
    </div>
    <div class="hidden-xs hidden-sm col-md-3 hidden-lg" align="center">
      <img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
      <!--Desktop-->
    </div>
    <div class="hidden-xs hidden-sm hidden-md col-lg-3" align="center">
      <img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
      <!--Large-->
    </div>

    <div class="hidden-xs hidden-sm col-md-5 col-lg-5" align="center">
      <p>
        <font color="#000080">Windows - Siding - Roofing - Bathroom Remodeling - Patio Spaces</font>
      </p>
      <a align="center"><h1><strong><font color="red">800-322-0503</font></strong></h1></a>
      <p>
        <font color="#000080">Quality Products at Unbelievable Prices - Since 1967</font>
      </p>
    </div>

    <div class="col-md-3" align="center">
      <span class="visible-lg"></span>
      <img src="http://acricompany.com/pics/fpq2.gif" width="220" height="120" alt="" />
    </div>

  </div>
</div>

Answer 1

您遇到的问题是最底层<div>（fpq2.gif）只有一个col-md-3类，较小的尺寸会导致它重叠上面的图片由于某种原因（没有调查）。 <{1}}和任何其他必需的类添加到col-xs-12，您的问题将得到解决。

Answer 2

首先，要知道有visible-md和visible-xs等类。它们可以节省大量代码并提高可读性。请注意，这些类在Twitter Bootstrap 4中称为hidden-*-up和hidden-*-down（其中*代表大小）。

其次，请注意，这些天SVG得到了很好的支持，请参阅：http://caniuse.com/#search=svg。您可能希望将其用于徽标。 SVG呈现任何尺寸的完美。这将大大减少您需要的图像数量。您最终可能会点击“我”。带有visible-xs类的图像和带有hidden-xs类的常规图像。

最后，请注意，由于视网膜显示，查看页面的渲染大小（由Twitter Bootstrap完成）不再是确定图像所需像素数量的精确方式（不再）。与具有hidden-xs类的图像相比，visible-xs类图像实际上可能需要更多像素才能完美清晰。请阅读这篇文章：http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/（或类似的）。

点击为不同尺寸的浏览器调用不同的图像

2 个答案: