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标签上。这样，图像不会比您在那里设置的值小。

Answer 2

您的代码中有多处错误。在此输入您的代码并点击检查然后修复错误。 html validator

从</link>

的末尾取消<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>

<center>是淫秽的，使用css。在您的css样式表中，您可以添加h1 { text-align: center;}或内联HTML，就像这样<h1 style="text-align:center;">Centered Heading</h1>

Answer 3

尝试在head标记中添加此内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

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

3 个答案: