html - 在 divs 中带有一些图像的响应式页脚

Question

我有一个 Wordpress 网站。我更改了页脚以包含五个带有图像的 div。

这是页脚的 html 代码:

<footer class="site-footer">
        <div class="table">
            <div class="logo-gallery">
                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div><!-- .logo -->
            </div><!-- .logo-gallery -->
        </div><!-- .table -->
    </footer> 

对于 css 我想到了这个:

/* Footer */  
.site-footer {
    background-color: #e8e5ce;
    /*min-height: 180px;*/
}

.site-footer .table {
    display: table;
    width: 80%;
    margin: 0 auto;
}

.site-footer .logo-gallery {
    display: table-row;
}

.site-footer .logo {
    display: table-cell;    
}

在台式电脑上，图像现在可以按照我希望的方式显示:
1. 它们占宽度的 80%(这样它们彼此靠得更近)
2. 它们(作为一个组)水平放置在屏幕中央。

我想让图像适合较小的屏幕(手机或平板电脑)- 现在，当我尝试缩小浏览器窗口时，我会看到一个水平滚动条，并且图像超出了窗口的右边缘(我尚未用手机检查此代码)。

在较小的屏幕上，我希望它们变小以适应宽度(全部五个)或出现在彼此下方(背景颜色在下方拉伸(stretch))。

我还有一个第二版的 css。在这里，问题是当缩小浏览器窗口时图像会聚集在一起(在手机上也是如此:检查这里:http://npozp.pl/)

/* Footer */

.site-footer {
    background-color: #e8e5ce;
    min-height: 180px;
}

.site-footer .logo-gallery {
    margin: auto;
    width: 70%;
}

.site-footer .logo {
    float: left;
    width: 20%;
    height: auto;
    padding: 30px 15px;
}

我正在寻找一种方法来做到这一点，它可以是上述代码之一修复或请建议我可以采用的方法。

感谢阅读! :-)

Answer 1

请考虑使用媒体查询，以便您可以使用设备的像素大小来操纵您的布局。

您的 css 调整应如下所示:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .site-footer .logo {
   width: 100%;
  }
}

如您所见，可以更改混合和最大设备宽度值，并且您可以添加多个媒体查询以充分利用您的布局。