html - 使用媒体查询调整社交链接的大小

Question

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

页面顶部的社交链接:

 `<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:#">jo@handson-therapy.com</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/

感谢您的帮助:)

Answer 1

你试过设置 min-width: 70px !important;在 img 标签上。这样图像就不会小于您在其中设置的值。