html - 通过媒体查询调整社交链接的大小

我遇到一些困难。我正在开发一个网站，并且当屏幕尺寸减小时，社交链接图标变得很小的问题。我想使用媒体查询来指定较小屏幕的尺寸-我正在尝试的方法不起作用。

页面顶部的社交链接：

 `<div class="container">
    <div class="row-1">
        <!--First column-->
        <div class="col-sm-3">
            <img src="images/fbGrey.png" class="img-responsive"
style="width:50px" alt="Find us on Facebook">
                <hr class="vertical"/>

        </div>
<!--Second column-->
<div class="col-sm-3">
    <img src="images/twitterGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Twitter">
        <hr class="vertical"/>

        </div>
<!--Third column-->
<div class="col-sm-3">
    <img src="images/instagramGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Instagram">
        <hr class="vertical"/>

        </div>
<!--Fourth column-->
<div class="col-sm-3">
    <img src="images/pinterestGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Pinterest">
        <hr class="vertical"/>
        </div>
    </div>
</div>`

页脚中的社交链接：
      `
    
        

        <!--First column-->
        <div class="col-md-3">
 <!--Social buttons-->
        <!--First column-->
    <div class="container">
      <div class="row-3">
        <div class="col-sm-3">
            <img src="images/fbGrey.png" class="img-responsive"
style="width:70px" alt="Find us on Facebook" id="fb">
    <img src="images/twitterGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Twitter">

    <img src="images/instagramGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Instagram">

    <img src="images/pinterestGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Pinterest">

    </div>
</div>
</div>`

另外，当减小屏幕尺寸时，在页脚内<div class="footer-copyright">的高度会增加-有人知道为什么会这样吗？我还想使用媒体查询来解决此问题，但似乎不起作用。

 `<!--footer-->
  <div class="span4">
    <!-- empty, but using spacer to prevent collapse -->
     <div class="spacer10"></div>
    </div>            </div>

        <!--Second column-->
        <div class="col-md-3">
            <h5 class="title">OUR SERVICES</h5>
                <p><a href="treatments.html">Treatments</a></p>
                <p><a href="bookings.html">Bookings</a></p>
                <p><a href="shop.html">Shop</a></p>
            </div>

        <!--First column-->
        <div class="col-md-3">
            <h5 class="title">COMPANY</h5>
                <p><a href=index.html>Home</a></p>
                <p><a href="contact.html">Location</a></p>
                <p><a href="contact.html">Contact</a></p>
                <p><a href="privacypolicy.html">Privacy Policy</a></p>

        </div>
            <!--Second column-->
        <div class="col-md-3">
            <h5 class="title">CONTACT</h5>
                <strong>Hands on Sports & Holistic Therapy</strong><br>
                50 Westonfields<br>
                Bridgetown<br>
                Totnes<br>
                TQ90 5QX<br>
                <abbr title="Phone">P: 07450232531</abbr><br><br>
            </address>

            <address>
                <strong>Email: </strong><br>
                <a href="mailto:#">[email protected]</a>
            </address>
        </div>
    </div>
</div>

<hr>
 <!--Copyright-->
<div class="container">
<div class="row-5">
    <div class="col-sm-12">
        <div class="footer-copyright">
            <div class="container-fluid">
                <center>© 2017 Copyright: Hands on Sports & Holistic
Therapy. All rights reserved.</center>
            </div>
        </div>
    </div>
</div>
<div class="span4">
    <!-- empty, but using spacer to prevent collapse -->
     <div class="spacer40"></div>
    </div>

</footer>
<!--/.Footer-->`

这是我在JSFiddle中的代码-没有图像。
https://jsfiddle.net/AnnieWebDev/frrvmpnr/

谢谢你的帮助 ：）

最佳答案

您是否尝试过设置最小宽度：70px！在img标签上。这样，图像将不会小于您在其中设置的值。

关于html - 通过媒体查询调整社交链接的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42488128/