Question

我正在我的网站上设置响应页脚。看起来几乎不错，因为debbuger设置的设备中90％都很好地显示了页脚的内容，但是我不知道小型设备的良好做法是什么。

我在页脚内提供的媒体图标很少，应将用户转发到其他页面。我正在使用Bootstrap 4来显示内容中的图像，并且效果很好。我正在使用Django，因此我为页面的每个部分剪切了html和CSS。

这就是现在的页脚html的样子：

{% block footer %}
    <footer class="footer">
        <div class="social-media hidden-xs">
            <li>
                <i class="fab fa-facebook-square"></i>
            </li>
            <li>
                <i class="fab fa-instagram"></i>
            </li>
            <li>
                <i class="fab fa-pinterest"></i>
            </li>
            <li>
                <i class="fab fa-linkedin"></i>
            </li>
            <li>
                <i class="fas fa-search-location"></i>
            </li>
        </div>
    </footer>
{% endblock %}

我有样式CSS：

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-color: white;

}

.footer .social-media {
    display: flex;
    width: 450px;
    margin: 0 auto;
}

.footer .social-media > li {
    list-style: none;
    display: inline-block;
    margin: 10px auto;
    font-size: 20px;
    padding: 10px 10px;
}

创建具有提供的页脚的网站有什么好的做法？为每个设备指定分辨率不同的样式？还是响应式解决方案是个好主意？

现在在主页上看起来像这样：

https://imgur.com/a/wAMY6tn“在浏览器中具有完整页面分辨率的页脚”

https://imgur.com/a/XneMssK“在浏览器中具有其他较小分辨率的页脚”

https://imgur.com/a/Wahn4Gg“分辨率非常小的页脚”

我希望获得在响应性页脚部分进行Web编程时经常实践的结果。

Answer 1

伙计，这是您的解决方案。只需将.social-media类下的width属性更改为max-width即可。它将像魅力一样工作。

 .footer .social-media{
     max-width: 453px;
 }

如何设置页脚图标的响应部分

1 个答案: