さまざまなサイズのブラウザで異なる画像をクリックして電話をかける

Question

携帯電話のロゴをClick To Call画像に変更するコードは次のとおりです。それ以外のサイズの場合は、Click to Call機能を持たない通常のロゴです。しかし、実際にクリックして呼び出すことはできません。モバイルサイズのロゴは変更されますが、クリックすることはできません。クリックすると何もしません。私はここで間違っているのですか？

<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のクラスを持っているということですそれに）。 col-xs-12とその他の必要なクラスをdivに追加すると、問題が解決されます。

Answer 2

まず、visible-mdとvisible-xsのようなクラスがあることを知ってください。それらは多くのコードを節約し、可読性を向上させます。これらのクラスは、Twitterブートストラップ4（*はサイズを表します）にhidden-*-upとhidden-*-downと呼ばれています。

第2に、最近SVGがサポートされていることに注意してください。http://caniuse.com/#search=svgあなたはあなたのロゴにそれを使用したいかもしれません。 SVGはどんなサイズでも完璧にレンダリングされます。これにより、必要な画像の量が大幅に削減されます。あなたは、visible-xsクラスとhidden-xsクラスを持つ普通の画像を持つ「クリックして」画像で終わるかもしれません。

最後に、網膜のためにあなたのイメージに必要なピクセルの量を決定するための賢明な方法ではありません（これは、Twitterブートストラップによって行われる）ページのレンダリングされたサイズを見ると表示されます。 visible-xsクラスの画像は、実際にはhidden-xsクラスの画像よりも完全にシャープであるためには、より多くのピクセルを必要とするかもしれません。この記事をお読みください：http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/（または類似のもの）。